2

我尝试将 2 个 div 水平居中并在它们之间对齐这 2 个 div。当我在每个 div 中放置不同大小的文本时，问题就来了。这是示例：http: //jsfiddle.net/DgEcs/1/

为什么红色的div会下移，如何解决？
CSS：

.container{
    margin: 20px auto;
    height: 50px; line-height: 50px;
    text-align: center; /* to center red and blue */
    background: whiteSmoke;
}
.red{ 
    display:inline-block; /* to put it side by side */
    font-size: 10px;
    background:red;
}
.blue{ 
    display:inline-block; /* to put it side by side */
    font-size: 26px;
    background:blue;
}

HTML：

<div class="container" >
    <div class="red"> aaaaaaa </div>
    <div class="blue"> bbbbbbb </div>
</div>
4

2 回答 2

2

添加vertical-align: top;到两者的 CSS.red和.blue

于 2013-04-10T14:00:32.313 回答
2

只需添加vertical-align:top. 您还可以优化您的 css……</p>

http://jsfiddle.net/DgEcs/4/

.container div {
    vertical-align:top;
    display:inline-block;
}

.red{ 
    font-size: 10px;
    background:red;
}

.blue{ 
    font-size: 26px;
    background:blue;
}

现在它应该是这样的： 从 Chrome 26/OSX 截取的屏幕截图

于 2013-04-10T14:00:57.437 回答