我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。
这是我的<div>风格:
#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么?
我有一个包含文本的<div>元素,我想将这个<div>的内容垂直居中对齐。
这是我的<div>风格:
#盒子{高度:170px;宽度:270px;背景:#000;字体大小:48px;颜色:#FFF;文本对齐:居中;}<div id=“box”>Lorem ipsum悲哀坐</div>
实现这一目标的最佳方式是什么?
当前回答
简单而通用的方法是表格方法):
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:
<parent ctrv> <ch1/> <ch2/> </parent>
其他回答
另一种方式:
不要设置div的height属性,而是使用padding:来实现效果。与行高度类似,它仅在您有一行文本时有效。尽管这样,如果您有更多的内容,文本仍然会居中,但div本身会稍微大一些。
因此,与其继续:
div {
height: 120px;
line-height: 120px;
}
你可以说:
div {
padding: 60px 0; /* Maybe 60 minus font-size divided by two, if you want to be exact */
}
这会将div的顶部和底部填充设置为60px,左侧和右侧填充设置为零,使div高120像素(加上字体的高度),并将文本垂直居中放置在div中。
一个非常简单和最强大的垂直对齐中心的解决方案:
.外部div{高度:200px;宽度:200px;文本对齐:居中;边框:1px实心#000;}.内部{位置:相对;顶部:50%;变换:translateY(-50%);颜色:红色;}<div class=“outer div”><span class=“inner”>无可用数据</span></div>
所有功劳都归于该链接所有者@Sebastian Ekström link;请仔细检查一下。在行动代码笔中看到它。通过阅读上述文章,我还创建了一个演示小提琴。
只需要三行CSS(不包括供应商前缀),我们就可以借助转换来实现:translateY垂直居中,即使我们不知道它的高度。
CSS属性转换通常用于旋转和缩放元素,但通过其translateY函数,我们现在可以垂直对齐元素。通常,这必须通过绝对定位或设置行高度来完成,但这些要求您知道元素的高度,或者仅适用于单行文本等。
为此,我们写下:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
这就是你所需要的。这是一种类似于绝对位置方法的技术,但其优点是我们不必在元素上设置任何高度,也不必在父元素上设置位置属性。它可以直接开箱即用,即使在Internet Explorer 9中也是如此!
为了使其更加简单,我们可以将其编写为带有供应商前缀的混合体。
简单而通用的方法是表格方法):
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:
<parent ctrv> <ch1/> <ch2/> </parent>
绝对定位和拉伸
与上面的方法一样,首先将父元素和子元素上的位置分别设置为相对和绝对。从那里情况就不同了。
在下面的代码中,我再次使用了该方法来水平和垂直地居中子对象,尽管您只能使用该方法进行垂直居中。
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
此方法的思想是通过将上、下、右和左值设置为0,尝试使子元素延伸到所有四条边。因为我们的子元素比我们的父元素小,所以它不能到达所有的四条边。
然而,将自动设置为所有四边的边距会导致相反的边距相等,并将子div显示在父div的中心。
不幸的是,上面的方法在InternetExplorer7及以下版本中不起作用,并且像前面的方法一样,子div中的内容可能会变得太大,导致其被隐藏。