CSS 内联/内联块元素垂直对齐

Question

我试图让几个

inline

和

inline-block

组件在

div

中垂直对齐。为什么这个例子中的

span

一定要被推下去呢？我已经尝试了

vertical-align:middle;

和

vertical-align:top;

，但没有任何变化。

HTML：

<div>
  <a></a><a></a>
  <span>Some text</span>
</div>​

CSS：

a {
    background-color:#FFF;
    width:20px;
    height:20px;
    display:inline-block;
    border:solid black 1px;
}

div {
    background:yellow;
    vertical-align:middle;
}
span {
    background:red;
}

结果：

小提琴

Answer 1

vertical-align

适用于正在对齐的元素，而不是其父元素。要垂直对齐 div 的子级，请执行以下操作：

div > * {
    vertical-align:middle;  // Align children to middle of line
}

参见：http://jsfiddle.net/dfmx123/TFPx8/1186/

注意：

vertical-align

是相对于当前文本行的，而不是父级

div

的完整高度。如果您希望父级

div

更高并且仍然使元素垂直居中，请设置

div

的

line-height

属性而不是其

height

。请按照上面的 jsfiddle 链接查看示例。

Answer 2

在

vertical-align:top;

和

a

中给予

span

。像这样：

a, span{
 vertical-align:top;
}

检查这个http://jsfiddle.net/TFPx8/10/

Answer 3

简单地将两个元素向左浮动即可达到相同的结果。

div {
background:yellow;
vertical-align:middle;
margin:10px;
}

a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}

span {
background:red;
display:inline-block;
float:left;
}

Answer 4

要微调

inline-block

项目的位置，请使用顶部和左侧：

  position: relative;
  top: 5px;
  left: 5px;

谢谢CSS技巧！

Answer 5

我对接受的答案不满意。它并不是真正居中，我在第一个例子中展示/证明了这一点，所以我尝试了一下，发现的两个解决方案是经典的

top: 50%

加上

translateY(-50%)

绝对定位或使用弹性盒。

旁注：

我个人发现

vertical-align

的工作原理有点复杂，我不确定这是否可以像弹性盒一样用于真正居中整个子内联块。 信息可以在这里找到。但请注意两个事实：

基线

Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is

HTML 规范未指定，这意味着它们的行为 此关键字可能因浏览器而异。

中

Aligns the middle of the element with the baseline plus half the x-height of the parent.

如您所见，

vertical-align: middle

涉及x高度，并且与文本更多相关，因此并不“真正”居中，即整个元素。

示例1：

也许您需要放大才能看到细微的差异，我做了一些轮廓以使其更明显。

div {
  background: orange;
  margin: 10px;
  line-height: 40px;
  position: relative;
}

div>* {
  line-height: normal;
}

a {
  background-color: #FFF;
  height: 20px;
  display: inline-block;
  border: solid black 1px;
  padding: 5px;
  outline: 1px dotted black;
  outline-offset: 2px;
}

.va-m {
  vertical-align: middle;
}

span {
  height: 16px;
  display: inline-block;
  outline: 1px dotted black;
  outline-offset: 9px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div>
  Pure text
  <a>Not really centered</a>
  <a class="va-m">Not really centered</a>
  <span>Centered</span>
</div>

示例 2：Flexbox

（这是一个很好的指南。）

a {
  background-color: #FFF;
  width: 20px;
  height: 20px;
  display: inline-block;
  border: solid black 1px;
}

div {
  height: 40px;
  background: yellow;
  display: flex;
  align-items: center;
}

span {
  background: red;
}

<div>
  <a></a>
  <a></a>
  <span>Some text</span>
</div>