垂直居中内联内容[重复]答案

【问题标题】：vertically center inline content [duplicate]垂直居中内联内容[重复]
【发布时间】：2017-05-25 15:27:19
【问题描述】：

我有对齐的文本和图像内容/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;
}

【问题讨论】：

见：stackoverflow.com/questions/5932201/…

标签： html css

【解决方案1】：

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

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/

【讨论】：

【解决方案2】：

为此规则添加vertical-align: middle;:

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

【讨论】：

没想到这么简单。良好的浏览器支持？
是的 - 内联块没什么特别的......
Appology，我的意思是垂直对齐：中间；有很好的支持
是的，请看这里：w3schools.com/cssref/pr_pos_vertical-align.asp - 向下滚动一下以查看浏览器支持：自 IE 4、Chrome 1、Firefox 1、Safari 1、Opera 4...

【解决方案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>

【讨论】：