我试图在另一个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/


当前回答

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

我们设置父div显示为表格,子div显示为表格单元格。然后我们可以在子div上使用vertical-align并将其值设置为middle。这个子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 >

小提琴

这就是答案:

垂直对齐使元素相对于元素所在行的尺寸进行对齐。

参考:https://christopheraue.net/design/why-vertical-align-is-not-working

试试这个,对我很有效:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

我用这个来对齐包装器div中心的所有东西,以防它帮助任何人-我发现它最简单:

div.wrapper { /*——这是有效的——*/ 显示:flex; /*垂直对齐*/ 对齐项目:中心; /*水平对齐*/ justify-content:中心; /* --- ---------- ----- */ 宽度:100%; 身高:100 px; 背景颜色:蓝色; } div.inner { 宽度:50 px; 高度:50 px; 背景颜色:橙色; } < div class = "包装" > < div class = "内部" > < / div > < / div >

这里有两种方法做垂直对齐的例子。我用过,效果很好。一个是使用绝对定位,另一个是使用flexbox。

垂直对齐示例

使用flexbox,你可以通过display: flex;使用align-self。如果你也需要水平对齐,你可以在容器中使用align-items和justify-content。

如果不想使用flexbox,可以使用position属性。如果容器是相对的,内容是绝对的,那么内容就可以在容器内自由移动。如果你用top: 0;左:0;在内容中,它将位于容器的左上角。

然后,对齐它,你只需要改变顶部和左侧的引用为50%。这将从内容的左上角开始将内容定位在容器中心。

所以你需要纠正这个,将内容的一半大小平移到左边和上面。