0

如何在父元素（称为“PE”）中将内联块的底部（称为“IB”）与文本的底部对齐 - 不包括像“g”上的下降线？这应该以一种概括文本大小的方式 - 我不想硬编码特定于大小的像素值。

这是我将使用的 HTML 示例，其中包含我需要 CSS 的类：

<div class="pe">
    Parent text line
    <span class="ib" style="display: inline-block;">
        - and child text line
    </span>
</div>

这就是我希望它看起来的样子：

http://imgur.com/S1l7Y

4

3 回答 3

1

您可以将以下 css 添加到 ib。并更改下边距以控制对齐。

.ib{
     display: inline-block;
     font-size: 10px; 
     vertical-align: bottom;
     margin:0 0 1px 0;
}​

@Rorok_89 我知道我正在添加一行 css，但这只是一种以不同方式完成的方法。你的答案很完美。

于 2012-06-14T10:56:30.477 回答
1

OP 更新说：“谢谢，但我已经编辑了问题以澄清我不想硬编码特定大小的像素值。”

在那种情况下，恐怕没有一种解决方案可以自动修复具有不同文本大小的不同行。我提供的另一个解决方案在所有具有某些字体大小组合的浏览器中甚至都不是完美的，因为 Chrome/Opera 舍入的不精确值与 Firefox/IE 不同，所以即使使用我的解决方案，您也需要使用一些浏览器-特定的 css。唯一类似于通用解决方案的方法是设置 vertical-align: middle; 但我不相信它会始终如一地工作。

于 2012-06-15T11:41:25.043 回答
0

这似乎对我有用：http: //jsfiddle.net/Rorok_89/Z8TWH/

.ib{
 display: inline-block;
 font-size: 10px; 
 vertical-align: 1px;
}
于 2012-06-14T10:41:03.307 回答