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

Question

我试图让几个内联和内联块组件在一个

中垂直对齐。为什么这个例子中的坚持被推下去？我尝试过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;
}

​ 结果：

演示代码

- Yarin

---

请注意，如果<a>元素内包含一些文本，则不会发生这种情况[请参阅此链接]（https://dev59.com/eWYr5IYBdhLWcg3wmLRk）。 - S.Serpooshan

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链接示例。

- Diego

---

如果您为外部 div 指定高度，则此功能将停止工作。 - Abhranil Das

vertical-align属性是相对于当前文本行而不是父元素的。为了让它按照你想要的方式工作，应该设置div的line-height而不是height。 - Diego

Answer 2

在 a 和 span 中加入 vertical-align:top;。就像这样：

a, span{
 vertical-align:top;
}

查看此http://jsfiddle.net/TFPx8/10/

- sandeep

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;
}

- HoldTheLine

---

将它们向左浮动的问题在于当浏览器变得太小时，它们会换到下一行。有时您需要让项目保持在浏览器边界之外甚至保持在同一行，因此 inline-block 是唯一的解决方案。 - Jake Wilson

虽然包装问题可能会成为一个问题，但我认为这是那些允许换行的情况下的一个非常好的解决方案。它优雅，符合所需效果的精神，并且不需要对父级进行修改。 - Crispen Smith

Answer 4

要微调 inline-block 元素的位置，请使用 top 和 left：

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

感谢 CSS-Tricks 提供的帮助！

- kslstn

---

translate 也是可能的。 - Sebastian Simon

完美运行！ - NorahKSakal