内联/内联块元素的CSS垂直对齐 [英] CSS vertical alignment of inline/inline-block elements

问题描述

我想尝试在<$ c $中垂直排列多个内联和 inline-block c> div 。如何在这个例子中 span 坚持被压下？我尝试过 vertical-align：middle; 和 vertical-align：top; / p>

HTML ：

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

CSS： p>

  a {
 background-color：#FFF; 
 width：20px; 
 height：20px; 
 display：inline-block; 
 border：solid black 1px; 
} 
 
 div {
 background：yellow; 
 vertical-align：middle; 
} 
 span {
 background：red; 
} 
  

结果： >

FIDDLE

解决方案

vertical-align 适用于要对齐的元素，而不是它们的父元素。要垂直对齐div的子项，请改为：

  div> * {
 vertical-align：middle; //将子对齐到行中间
} 
  

请参阅： http://jsfiddle.net/dfmx123/TFPx8/1186/

注意： vertical-align 是相对于当前文本行，而不是父级的完整高度 div 。如果您希望父元素 div 更高并仍具有垂直居中的元素，请设置 div 的 line-height 属性，而不是其 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垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！