我有一个包含文本的<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部分。
其他回答
尝试此解决方案:
.扩展器{位置:绝对;顶部:0px;左:0px;底部:0px;右:0px;宽度:100%;高度:100%;overflow-y:隐藏;overflow-x:隐藏;}.衬垫中心{宽度:100%;高度:100%;显示:-webkit框;显示:-moz框;显示:-ms flexbox;显示:-webkit flex;显示:柔性;-webkit盒子包:中心;-moz盒装:中心;-ms柔性包装:中心;-webkit调整内容:中心;对齐内容:中心;-webkit框对齐:居中;-moz框对齐:居中;-ms flex align:中心;-webkit对齐项目:中心;对齐项目:居中;}<div class=“EXTENDER”><div class=“PADDER-CENTER”><div contentEditable=“true”>编辑此文本</分区></div></div>
使用CSS+构建。
尝试转换属性:
#盒子{高度:90px;宽度:270px;位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>
这是使用Flexbox的另一个选项。
#集装箱{显示:柔性;高度:200px;背景:橙色;}.儿童{边距:自动;}<div id=“container”><div class=“child”><span>Lorem ipsum dolor坐在amet consectetur adipiscing elit。鼹鼠,尼莫</span></div></div>
后果
这里有一篇关于CSS居中的好文章。过来看。
对于单行文本(或单个字符),可以使用以下技术:
当#box具有非固定的相对高度(以%为单位)时,可以使用它。
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
在JsBin(更容易编辑CSS)或JsFiddle(更容易更改结果框的高度)观看现场演示。
如果你想将内部文本放在HTML中,而不是CSS中,那么你需要将文本内容包装在额外的内联元素中,然后编辑#box::after以匹配它。(当然,content:property应该被删除。)
例如<div id=“box”><span>文本内容</span></div>。在这种情况下,#box::after应替换为#box span。
对于Internet Explorer 8支持,必须将::替换为:。
较新的浏览器现在支持CSS calc功能。如果您针对的是这些浏览器,您可能需要考虑这样做:
<div style=“位置:相对;宽度:400px;高度:400px,背景色:红色”><span style=“位置:绝对;行高:40px;高度:80px;文本对齐:居中;宽度:300px;溢出:隐藏;顶部:计算(50%-40px);左侧:计算(50%-150px);”>这里有两条线,即使父div改变大小,也会居中。</span></div>
关键是在绝对或相对定位的父除法中使用style=“top:calc(50%-[inerFixedHeightInPX/2]px);height:[inerFixed HeightInPX;”。