Question

这让我发疯了我只是不明白为什么这个简单的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

这是疯狂的部分。这是一个jsfiddle与相同的HTML，并在那里工作！在相同的chrome / win7上测试！ http://jsfiddle.net/pkrsdqkb/

Answer 1

与vertical-align: middle很好地配合使用的一个选项是使用display: table和display: table-cell。

包装器获取display: table和width: 100%
将div中的链接包裹在一个div中，该div将作为“表格单元格”display: table-cell

vertical-align: middle现在可以按预期工作。

兼容性：display: table为good for IE 8 + and modern browsers everywhere.

示例：

.header-a-wrapper {
  background: red;
  display: table;
  text-align: center;
  height: 100px;
  width: 100%;
}
.vertical {
  display: table-cell;
  vertical-align: middle;
}
.right {
  background: blue;
  display: block;
  margin: 2px 0;
}

<div class="header-a-wrapper">
  <div class="vertical">
    <a href="/user/5659186348163072" class="right">medical salamander</a>

    <a href="/user/5659186348163072" class="right">medical salamander</a>
  </div>
</div>

旧答案

有很多冗余的CSS。

通过以下方式应用垂直中心：line-height: 48px。

将其保留在包装器上并删除a.right上的所有定位CSS属性。

示例：

.header-a-wrapper {
  line-height: 48px;
  background: red;
  display: block;
  text-align: center;
}
.right {
  background: blue;
}

<div class="header-a-wrapper"> 
  <a href="/user/5659186348163072" class="right">medical salamander</a>
</div>

Answer 2

非常奇怪，但如果你想解决它，你可以添加＆＃39; a＆＃39;：

position: relative;
top: 50%;
transform: translateY(-50%);

删除

vertical-align: middle;
float: none;

将文本垂直居中放在框中，而不知道有多少行

2 个答案:

旧答案