首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >内联/内嵌块元素的CSS垂直对齐

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

Stack Overflow用户
提问于 2012-03-13 00:00:35
回答 4查看 168.3K关注 0票数 151

我正在尝试让几个inlineinline-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;
}

结果:

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2012-03-13 00:03:53

vertical-align应用于要对齐的元素,而不是其父元素。要垂直对齐div的子项,请执行以下操作:

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

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

注释vertical-align是相对于当前文本行的,而不是父div的完整高度。如果您希望父div更高,并且元素仍然垂直居中,请设置divline-height属性,而不是其height

票数 290
EN

Stack Overflow用户

发布于 2012-03-13 00:04:13

a & span中提供vertical-align:top;。如下所示:

a, span{
 vertical-align:top;
}

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

票数 25
EN

Stack Overflow用户

发布于 2012-03-13 00:04:17

只需将两个元素向左浮动即可得到相同的结果。

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;
}
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9670469

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档