html - 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;
}

我正在尝试垂直对齐 <span>在<div>里面.

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

我也试过使用 vertical-align:middle在span和 parent div没有任何成功。

Fiddle link对于这个问题。

谢谢。

Answer 1

当您在 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;
}