我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
我只想扩展Michielvoo的答案,以释放对线高度和呼吸div高度的需求。它基本上只是这样一个简化版本:
第二部分{宽度:250px;/*高度:100px;线条高度:100px*/文本对齐:居中;边框:1px实心#12346;背景色:#bbbbff;填充:10px;边距:10px;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>所有的成年人都曾经是孩子。。。但只有少数人记得</span></div><div><span>现在这是我的秘密,一个非常简单的秘密:只有用心才能看清真相;本质的东西是肉眼看不见的</span></div>
注:注释了封闭分区固定高度所需的cssis部分。
其他回答
您可以使用以下代码段作为参考。这对我来说就像一种魅力:
html,正文{高度:100%;边距:0;填充:0;宽度:100%;}正文{显示:表格;}.居中文本{文本对齐:居中;显示:表格单元格;垂直对齐:中间;}<div class=“居中文本”><h1>是的,这是我的登录页</h1><h2>正在建设中,即将到来</氢气></div>
上述代码段的输出如下:
灵活的方法
第二部分{宽度:250px;最小高度:50px;线条高度:50px;文本对齐:居中;边框:1px实心#12346;边距底部:5px;}跨度{显示:内联块;垂直对齐:中间;线高度:正常;}<div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit<br/>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet,consectetur adipiscing elit</span></div><div><span>Lorem ipsum dolor坐amet</span></div><div>
这很简单,也很短:
.块{显示:表格行;垂直对齐:中间;}.平铺{显示:表格单元格;垂直对齐:中间;文本对齐:居中;宽度:500px;高度:100px;}<div class=“body”><span class=“tile”>你好,中间世界!:)</span></div>
.element{position: relative;top: 50%;transform: translateY(-50%);}
将此小代码添加到元素的CSS属性中。太棒了。试试看!
简单而通用的方法是表格方法):
[ctrv]{
display: table !important;
}
[ctrv] > *{ /* Addressing direct descendants */
display: table-cell;
vertical-align: middle;
// text-align: center; /* Optional */
}
在父标记上使用此属性(或等效的类)甚至可以使许多子标记对齐:
<parent ctrv> <ch1/> <ch2/> </parent>