在现代浏览器中垂直对齐浮动div（2014）

Question

我想再次提出这个问题，因为它之前的化身是在五年前。出于本讨论的目的，我们无需考虑IE9之前的任何内容：

我正在尝试使用不同的字体大小浮动两个div。我找不到将文字与同一基线 对齐的方法。这是我一直在尝试的：

<div id="header">
    <div id="left" style="float:left; font-size:40px;">BIG</div>
    <div id="right" style="float:left;">SMALL</div>
</div>

我正在努力解决这个问题，而我发现的最佳解决方案是从检查中获得的魔法抵消，而且这种解决方案并不健全。内联块有自己的问题，我宁愿避免。

编辑：

http://jsfiddle.net/crw4r/10/

如您所见，浮动对齐在顶部，而不是baseline。

Answer 1

将两者的行高设置为相同。
http://jsfiddle.net/crw4r/6/

例如

line-height: 42px;

或者如果这不是你想要的......
你可以使用绝对定位 http://jsfiddle.net/crw4r/7/

或者，您可以在两者上设置行高，并在较小的行的顶部添加边距，因此两个文本的行高和上边距的总和相同。
http://jsfiddle.net/crw4r/13/

Answer 2

使用display: inline-block，div会自动在基线上对齐。要补偿float，您可以使用text-align

#left {
    display: inline-block;
    width: 50%;
    font-size: 40px;
    text-align: left;
}
#right {
    display: inline-block;
    width: 50%;
    text-align: right;
}

请参阅JSFiddle

如果您需要占用空格，请使用width: 49%作为其中一个div

JSFiddle

Answer 3

您可以使用display: table-cell代替花车吗？

#header {
  display: table;
  width: 100%;
}

#header div {
  display: table-cell;
}

#left {
  font-size: 40px;
}

#right {
  text-align: right;
}

Demo

Answer 4

<div id="container">
    <div class="left"><span>Big</span></div>
    <div class="right"><span>Small</span></div>
</div>

#container{
    width:100%;
    margin:0px auto;
}

#container div{
    position:relative;
    height: 42px;
    width: 100px;
}
#container div span{
    position:absolute;
    bottom:0;
    right:0;
}
.left{
    float:left !important; font-size:40px;
}
.right{
    float:right !important;
}

Answer 5

尝试下面的css和html

CSS

.header {
    overflow: hidden;
    width: 200px;
    display:table;
}

.header > div{
    display:table-row;
}

.header > div > div{
    display:table-cell;
    vertical-align:baseline;
    width:50%;
}

.big {
    text-decoration: underline;
    font-size: 40px;
}
.small {
    text-decoration: underline;
    font-size: 12px;
}

HTML

<div class="header">
    <div>
        <div class="big">BIG</div>
        <div class="small">SMALL</div>
    </div>
</div>