我试图在另一个div元素中垂直居中一个span或div元素。然而，当我输入vertical-align: middle时，什么都没有发生。我试着改变这两个元素的显示属性，但似乎都不起作用。
这是我目前在我的网页上做的事情:
.main { 身高:72 px; vertical-align:中间; 边框:1px纯黑色; 填充:2 px; ｝ 在{ vertical-align:中间; 边框:1px纯红色; ｝ 接着{ 边框:1px纯蓝色; ｝ < div class = "主" > < div class = "内部" > 这个盒子应该放在大盒子的中间 <div class="second">这里还有一个盒子</div> < / div > < / div >
下面是实现的jsfiddle，显示它不起作用:http://jsfiddle.net/gZXWC/
当前回答
我用这个来对齐包装器div中心的所有东西，以防它帮助任何人-我发现它最简单:
div.wrapper { /*——这是有效的——*/ 显示:flex; /*垂直对齐*/ 对齐项目:中心; /*水平对齐*/ justify-content:中心; /* --- ---------- ----- */ 宽度:100%; 身高:100 px; 背景颜色:蓝色; ｝ div.inner { 宽度:50 px; 高度:50 px; 背景颜色:橙色; ｝ < div class = "包装" > < div class = "内部" > < / div > < / div >
其他回答
这很简单。只需在主类中添加display:table-cell。
.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}
看看这个jsfiddle!
这似乎是最好的方法——从我最初的帖子到现在已经过去了一段时间，这是现在应该做的:
.main { 显示:表; /*可选CSS start */ 身高:90 px; 宽度:90 px; /*可选CSS end */ ｝ 在{ 边框:1px实体#000000; 显示:表格单元; vertical-align:中间; ｝ < div class = "主" > <div class="inner">这个</div> . < / div >
你应该把垂直对齐:中间放在内部元素，而不是外部元素。在外部元素上设置line-height属性以匹配外部元素的高度。然后在内部元素上设置display: inline-block和line-height: normal。通过这样做，内部元素上的文本将以正常的行高换行。支持Chrome, Firefox, Safari和IE 8+
.main { 身高:72 px; 行高:72 px; 边框:1px纯黑色; ｝ 在{ 显示:inline-block; vertical-align:中间; 行高:正常; ｝ < div class = "主" > <div class="inner">垂直居中的文本</div> < / div >
小提琴
我用这个来对齐包装器div中心的所有东西，以防它帮助任何人-我发现它最简单:
div.wrapper { /*——这是有效的——*/ 显示:flex; /*垂直对齐*/ 对齐项目:中心; /*水平对齐*/ justify-content:中心; /* --- ---------- ----- */ 宽度:100%; 身高:100 px; 背景颜色:蓝色; ｝ div.inner { 宽度:50 px; 高度:50 px; 背景颜色:橙色; ｝ < div class = "包装" > < div class = "内部" > < / div > < / div >
使用CSS3:
<div class="outer">
<div class="inner"/>
</div>
Css:
.outer {
display : flex;
align-items : center;
}
使用"justify-content: center;"来水平对齐元素
注意:这可能无法在旧的IE中工作
