html - CSS 垂直对齐文本在网站上不起作用？

Question

我想将一行或多行的文本在 div 中垂直居中。但由于某种原因，这行不通:

#image {
    height: 96px;
    width: 100%;
    float: left;
    line-height: 96px;
}
    #image h5 {
        display: inline-block;
        vertical-align: middle;
        line-height: 13px;
    }

我做错了什么？

Answer 1

由于您希望它适用于不同数量的线路，因此您需要一个动态解决方案。试试 table/table-cell 方法:

#banner_middle {
    height: 96px;
    width: 100%;
    float: left;
    display: table;
}
#banner_middle h5 {
    display: table-cell;
    vertical-align: middle;
}

无需使用硬编码的 line-height 值。