Question

所以我有这个HTML

<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-xs-6"> <span class="currency-symbol">$</span><span class="price">44</span>

            </div>
            <div class="col-xs-6">
                <p>/ month</p>
                <p>Here are some really interesting things about the product.</p>
            </div>
        </div>
    </div>
</div>

然后这个CSS

.container {
    width: 333px;
    margin: 0 auto;
}
.currency-symbol {
    vertical-align: top;
    font-size: 33px;
}
.price {
    font-size: 88px;
    vertical-align: top; /* doesn't work */
}

＆＃39; $＆＃39;符号与RH列中的文本对齐到顶部。但价格金额并没有。

如何垂直对齐＆＃39; $＆＃39;符号，＆＃44; 44＆＃39;数量和RH栏中的文字是否全部符合？

JSFiddle：http://jsfiddle.net/magician11/4k19w0fs/3/

感谢。

Answer 1

您可以在价格等级上尝试行高

.price {
    font-size: 88px;
    line-height: 80px;
}

Answer 2

实际上工作，只是看起来不像。

突出显示“44”，您会看到突出显示延伸到数字顶部之外。唯一真正的方法是微调每个元素的line-height或margin-top。

.price {
    line-height:77px;
}

这似乎离我很近。请注意，其他字体（甚至其他数字）可能不同。

Answer 3

只需设置行高：1;在.price范围内，使其与空间高度具有相同的对齐方式。

.price {
    font-size: 88px;
    line-height: 1;
}

这使每个元素对齐。但是，我还建议查找垂直节奏以及如何使文本元素保持相同的垂直空间。

如何让两个相邻的跨距垂直显示文本？

3 个答案: