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

问题描述

我正在尝试让多个 inline 和 inline-block 组件在 div 中垂直对齐.这个例子中的span怎么会坚持下推呢?我尝试了 vertical-align:middle; 和 vertical-align:top;，但没有任何变化.

HTML:

<a></a><a></a><span>一些文字</span></div>

CSS:

a {背景色:#FFF；宽度:20px；高度:20px；显示:内联块；边框:纯黑色1px；}div {背景:黄色；垂直对齐:中间；}跨度 {背景:红色；}

结果:

FIDDLE

解决方案

vertical-align 适用于被对齐的元素，而不是它们的父元素.要垂直对齐 div 的子项，请执行以下操作:

div >* {垂直对齐:中间；//将孩子对齐到行的中间}

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

注意:vertical-align 相对于当前文本行，而不是父 div 的全高.如果您希望父 div 更高并且仍然具有垂直居中的元素，请设置 div 的 line-height 属性而不是它的.按照上面的 jsfiddle 链接查看示例.

I'm trying to get several inline and inline-block components aligned vertically in a div. How come the span in this example insists on being pushed down? I've tried both vertical-align:middle; and vertical-align:top;, but nothing changes.

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

​RESULT:

FIDDLE

解决方案

vertical-align applies to the elements being aligned, not their parent element. To vertically align the div's children, do this instead:

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

See: http://jsfiddle.net/dfmx123/TFPx8/1186/

NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted the parent div to be taller and still have the elements vertically centered, set the div's line-height property instead of its height. Follow jsfiddle link above for an example.

这篇关于内联/内联块元素的 CSS 垂直对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！