CSS：垂直对齐<a> within a floated <div> not working</div></a>

Question

我在<a>内有一个<div>。有vertical-align: middle;在这里不起作用的原因吗？

此外，我无法调整padding元素的margin或<a>。

HTML：

<div class="navigation">
    <div class="container">
       <a href="#">Test</a>
    </div>
</div>

CSS：

.navigation {
background: red;
height: 50px;
width: 100%;
}

.container {
background: blue;
float: left;
clear: none;
height: 100%;
text-align: center; // this works
vertical-align: middle; // this does not work.
}

.container a {
}

Answer 1

  

“有没有理由说vertical-align：middle;在这里不起作用？”

是的，原因是'vertical-align'只会在父节点是表格单元格（td或th）或者在css中将所述对象设置为display: table-cell时在其父节点内垂直对齐。

Google'与CSS垂直对齐'以查找各种示例，教程和解决方法。这是一个广泛涉及的主题。