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中使用div但没有取得任何成功。

问题

Fiddle link。

谢谢。

Answer 1

您需要将display: table/table-cell属性设置为div和span s。然后不要忘记删除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垂直对齐到中间

4 个答案:

Fiddle