这让我抓狂我只是不明白为什么这个简单的 css 在 div 中垂直居中元素不能按预期工作。
这是 html:
<div class="header-a-wrapper" style="
line-height: 48px;
height: 48px;
background: red;
display: block;
text-align: center;
">
<a href="/user/5659186348163072" class="right" style="
background: blue;
line-height: normal;
display: inline-block;
vertical-align: middle;
float: none;
height: 20px;
">medical salamander</a>
</div>
内部元素没有垂直居中,但我认为它应该垂直居中
这是一个包含两个元素的 html: http://alephz.com/test.html
这是疯狂的部分。这是一个具有相同 html 的 jsfiddle,它在那里工作!在相同的 chrome/win7 上测试! http://jsfiddle.net/pkrsdqkb/
最佳答案
很奇怪,但是如果你想解决它,你添加到'a':
position: relative;
top: 50%;
transform: translateY(-50%);
删除
vertical-align: middle;
float: none;
关于html - 在不知道多少行的情况下将文本在框中垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26367352/