CSS垂直对齐中间

debugcn 发表于 Dev

吉尔·佩雷兹（Gil Peretz）

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

我有以下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和父级中使用，div但未成功。

该问题的小提琴链接。

谢谢你。

普拉卡什

当您padding-bottom: 60px;在div中使用property时，这就是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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。