添加 vertical-align:middle 到复杂的 div答案

【问题标题】：Adding vertical-align:middle to intricate divs添加 vertical-align:middle 到复杂的 div
【发布时间】：2013-10-21 06:14:55
【问题描述】：

我有三个 div，其中包含不同长度的文本块。我想垂直对齐它们。我试过这个

#container{
    height:200px;
    vertical-align:middle;
    display:table-cell;
}

#content{
    height:150px;
    display: inline-block;
    vertical-align: middle
}

但似乎没有应用.. Here 是我的网站，我所说的部分是带有 3 个圆圈的部分（悬停时）：

【问题讨论】：

标签： css html css-position vertical-alignment

【解决方案1】：

将以下 CSS 添加到包裹 hover 上的文本的 div

        /* chrome */
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;

         /* Firefox */
        display: -moz-box;
        -moz-box-pack: center;
        -moz-box-align: center;

        /* IE */
        display: -ms-box;
        -ms-box-pack: center;
        -ms-box-align: center;


        /* Native CSS */
        display: box;
        box-pack: center;
        box-align: center;

【讨论】：

抱歉耽搁了……您的意思是除了我在问题中提到的样式之外，还是只是这些样式？我尝试了这些样式但没有运气.. :(

【解决方案2】：

你应该使用

display: table

和

display: table-cell

关于你的元素。

【讨论】：