CSS 垂直居中对齐

Question

我知道这个问题之前已经讨论过很多次了。但老实说，我没有为这个独特的案例找到任何合适的解决方案：

我有以下 HTML 代码：

 <div class="print-types-links">
    <ul>
        <li>
            <a href="#">
                <div> 
                    <span>aaa</span>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <div>
                    <span>bbb</span>
                </div>
            </a>
        </li>
    </ul>
</div>

和以下 CSS：

.print-types-links li{
list-style: none;

}
.print-types-links ul{
    padding: 0;
}
.print-types-links a{
    text-decoration:none;
}
.print-types-links div:hover{
    background-color:#F7FAFF;
}
.print-types-links div{
    border-style: solid;
    border-width:1px;
    border-color:#EAF2FD;
    margin-bottom: 10px;
    padding-bottom: 60px;
    text-align: center;
}

.print-types-links span{
    font-weight:bold;
    font-size: 1.3em;
}

我正在尝试垂直对齐 <div> 内的 <span>。

我希望的要求结果：文本应位于每个框的中间。 我知道我可以用指定的像素数来做到这一点。但我正在努力避免它。

我也尝试在 span 和父 div 中使用 vertical-align:middle 但没有成功。

Fiddle link 问题。

谢谢。

Answer 1

您需要将 display: table/table-cell 属性设置为 divs 和 spans。然后不要忘记删除 div.

的底部填充

.print-types-links div {
    padding-bottom: 0; 
    display: table; 
    width: 100%; 
    vertical-align: middle; 
    height: 100px;
 }

.print-types-links span {
    display: table-cell; 
    vertical-align: middle;
 }

http://jsfiddle.net/zo04s8q7/3/

Answer 2

由于您在 div 中使用 padding-bottom: 60px; 属性，这就是 div 未垂直对齐的原因。您可以使用上面的属性像 padding-top: 30px; ， padding-bottom: 30px 而不是 div 是垂直对齐的。

请参考 jsfiddle

CSS:

.print-types-links div{
    border-style: solid;
    border-width:1px;
    border-color:#EAF2FD;
    margin-bottom: 10px;
    padding-bottom: 30px;
    padding-top: 30px;
    text-align: center;
}

Answer 3

尝试填充：padding:30px 0px;。给 30px 顶部和底部。它会将您的文字居中对齐

.print-types-links div{
    border-style: solid;
    border-width: 1px;
    border-color: #EAF2FD;
    margin-bottom: 10px;
    padding:30px 0px;
    text-align: center;
}

Answer 4

line-height 是使 vertical-align 工作的关键：

.print-types-links div{
    height: 80px;
    line-height: 80px;
}

.print-types-links span{
    line-height: 1.2em;
    display: inline-block;
    vertical-align: middle;
}

CSS 垂直居中对齐

CSS Vertical align to middle

html

css

vertical-alignment

Fiddle