Question

我有对齐的文字和图片内容/ div。但是我希望它们彼此垂直居中。

HTML

<div class="cell"><a href="...'</a></div>
<div class="separate"></div>
<div class="cell"><a href="...'</a></div>
<div class="separate"></div>
<div class="cell"><a href="...'</a></div>

CSS

.cell, .separate {
  display: inline-block;
  margin: 0 5px;
}

.separate {
  width: 2px; height: 25px;
  background-color: red;
}

Answer 1

根据此规则，添加vertical-align: middle;：

.cell, .separate {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

Answer 2

垂直对齐内容的一种方法是使用行高。此方法仅适用于一行文本：

HTML

<div id="parent">
    <div id="child">Text here</div>
</div>

CSS

#child {
    line-height: 200px;
}

这也可以扩展到图像：

HTML

<div id="parent">
    <img src="image.png" alt="" />
</div>

CSS

#parent {
    line-height: 200px;
}

#parent img {
    vertical-align: middle;
}

您可以在此处阅读有关垂直居中内容的其他方法：http://vanseodesign.com/css/vertical-centering/

Answer 3

您可以使用vertical-align

垂直对齐内联内容

.cell, .separate {
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

.separate {
  width: 2px; height: 25px;
  background-color: red;
}

<div class="cell">asdf</div>
<div class="separate"></div>
<div class="cell">asdf</div>
<div class="separate"></div>
<div class="cell">asdf</div>

垂直居中的内联内容

3 个答案: