将一些元素与基线对齐并将其他元素与底部对齐

我试图将两个不同字体大小的文本元素对齐到彼此的基线，而且还将同一行中的图像与其底部对齐。我遇到的问题是，如果只有一个存在整体对齐更改，这会在使用javascript添加和删除元素时导致出现不和谐的效果。将一些元素与基线对齐并将其他元素与底部对齐

我想设置它，以便每个元素的底线与其底部之间的距离相同，以便哪种元素与图像共享线并不重要。也许有一些预处理可以根据行高和字体大小来计算字体的基线？

.line { 
    font-size: 15px; 
} 
.line > span { 
    background: #ccc; 
    display: inline-block; 
    line-height: 30px; 
    vertical-align: baseline; 
} 
.line > .b { 
    font-size: 30px; 
} 
img { 
    height: 50px; 
    vertical-align: bottom; 
    width: 50px; 
}

这是jsfiddle that demonstrates the problem。

来源

2014-10-06 theazureshadow

看看显示：表单元格并显示：表行。这对于这种事情是很好的。更新的小提琴：http://jsfiddle.net/k48muk5e/2/ – arlg 2014-10-06 23:06:54

如果我理解正确你的问题，你只需要包括：（我做它通过这里的跨度标签，因为这似乎是你试图做）vertical-align:bottom;为您的文本：

.line > span { 
    background: #ccc; 
    display: inline-block; 
    vertical-align: bottom; 
}

来源

2014-10-06 23:09:36 Enigmadan

我希望文本的基线也是一致的。 – theazureshadow 2014-10-06 23:34:50

@theazureshadow你确定吗？具有对齐基线的不同大小的字体看起来很好，很奇怪。这里有三个基于你的代码的不同的小提琴。他们中的任何一个看起来像你想要的？ http://jsfiddle.net/k48muk5e/19/（所有底部匹配），http://jsfiddle.net/k48muk5e/20/（文本基线匹配和图像位于文本底部），http://jsfiddle.net/k48muk5e/21 /（文本基线匹配和图像匹配父文本的底部）。 – Enigmadan 2014-10-06 23:46:49

@theazureshadow我认为重要的是要注意的是，“基线”是文本的底部，而不考虑诸如p和q等字符低于基线的字符。 – Enigmadan 2014-10-06 23:49:48

如果添加：

.line * { vertical-align: bottom; }

，并删除断了线的位置>跨度

.line > span { 
    background: #ccc; 
}

这将所有元素都对齐到底，是你想要的吗？

来源

2014-10-06 23:24:56 Dabrowski

不可以。基本上，我希望文本的基线和文本元素的底部之间的距离相同。如果这是真的，那么我可以使用'vertical-align：bottom'对齐所有东西。 – theazureshadow 2014-10-06 23:35:43

不确定你想要什么。也许你可以将它们显示为内嵌块并使用底部边距进行间隔？如果字体大小是可变的，则在'em'中指定它，并且它将缩放到字体大小。 – Dabrowski 2014-10-07 00:29:23

你能提供一个你想要实现的图像吗？ – Dabrowski 2014-10-07 00:30:19

如果我理解正确，你想实现什么，只是招行的高度，以.line区段：

div { 
    margin: 10px 0; 
} 
.line { 
    font-size: 15px; 
    line-height: 30px; 
} 
.line > span { 
    background: #ccc; 
    display: inline-block; 
    vertical-align: baseline; 
} 
.line > .b { 
    font-size: 30px; 
} 
img { 
    height: 50px; 
    vertical-align: bottom; 
    width: 50px; 
}

来源

2014-10-06 23:41:05 moonfly

将一些元素与基线对齐并将其他元素与底部对齐

回答

相关问题