如何在div内垂直居中<span>？
代码:
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
现在渲染时,跨度对齐div的左下角.
Phr*_*ogz 185
请参阅我关于理解垂直对齐的文章.在讨论结束时,有多种技术可以实现您的目标.
(超简短摘要:要么设置儿童的行高等于容器的高度,或在容器上设置的定位,并在绝对位置的子top:50%带margin-top:-YYYpx,YYY是儿童的已知高度的一半.)
- @Blender Heh,虽然在其中引用了第三个选项:`display:table-cell; vertical-align:middle`(以及`display:table-row` parent).:)但不,你可以肯定我[从不提倡使用HTML表格元素进行布局](http://phrogz.net/CSS/WhyTablesAreBadForLayout.html). (8认同)
- 如果'YYY`未知怎么办？ (6认同)
- @Phrogz - 您应该将http://css-tricks.com/centering-in-the-unknown/中的最后一个选项添加到您的答案中.它太干净了,ie8 +! (5认同)
- @Kyralessa不,如果你没有固定的内容高度,我的页面中还没有列出一些技术.例如,请参阅:http://css-tricks.com/centering-in-the-unknown/ (2认同)
Ott*_*lis 151
在您的父DIV添加
display:table;
并在您的子元素添加
display:table-cell;
vertical-align:middle;
JGa*_*rdo 37
单线跨度快速回答
使孩子(在这种情况下是一个跨度)与line-height父母<div>的身高相同
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
然后,您应该添加CSS规则
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }
或者您可以使用子选择器来定位它
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }
背景我自己用这个
我遇到了类似的问题,我需要在移动菜单中垂直居中.我制作了div并跨越了相同的线高.请注意,这是针对流星项目的,因此不使用内联css;)
HTML
<div class="international">
<span class="intlFlag">
{{flag}}
</span>
<span class="intlCurrent">
{{country}}
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS(div中多个跨度的选项)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
在这种情况下,如果我只有一个跨度,我可以直接将CSS规则添加到该范围.
CSS(一个特定范围的选项)
.intlFlag { line-height: 42px; }
这是它为我显示的方式
- 为高质量的子 div 示例文本点赞。 (2认同)
Pau*_*tte 36
与在类似的问题中一样,使用display: inline-block占位符元素将span元素垂直居中于块元素内:
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>垂直对齐仅适用于内联元素或表格单元格,因此在垂直居中块元素时,请将其与父对象一起使用display:inline-block或display:table-cell与display:table父对象一起使用.
参考文献: