我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
无论您想要垂直居中样式,都可以尝试显示:表格单元格和垂直对齐:中间。
例子:
#盒子{显示:表格单元格;垂直对齐:中间;高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>
其他回答
另一种方式(此处尚未提及)是使用Flexbox。
只需向容器元素添加以下代码:
display: flex;
justify-content: center; /* Align horizontal */
align-items: center; /* Align vertical */
Flexbox演示1
.box格式{高度:150px;宽度:400px;背景:#000;字体大小:24px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;填充:0 20px;边距:20px;显示:柔性;对齐内容:中心;/*水平对齐*/对齐项目:居中;/*垂直对齐*/}<div class=“box”>Lorem ipsum dolor坐amet,consectetuer adipiscing elit,sed diam nonmmy笔尖</div>
或者,当柔性容器中只有一个柔性项时,flexbox也可以使用自动边距将柔性项居中,而不是通过容器对齐内容(如上面问题中给出的示例)。
因此,要在水平和垂直方向上将柔性项居中,只需将其设置为margin:auto
Flexbox演示2
.box格式{高度:150px;宽度:400px;背景:#000;字体大小:24px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;填充:0 20px;边距:20px;显示:柔性;}.箱形跨度{边距:自动;}<div class=“box”><span>边距:在弹性项上自动将其水平和垂直居中</span></div>
注意:以上所有内容都适用于在水平行中排列项目时对中项目。这也是默认行为,因为默认情况下,弯曲方向的值为row。然而,如果柔性项需要在垂直列中布局,则应在容器上设置柔性方向:列,以将主轴设置为列,此外,justify-content和align-items财产现在与justify content相反:垂直居中和align-items:水平居中)
灵活方向:列演示
.box格式{高度:150px;宽度:400px;背景:#000;字体大小:18px;字体样式:倾斜;颜色:#FFF;显示:柔性;弯曲方向:柱;对齐内容:中心;/*垂直对齐项目*/对齐项目:居中;/*水平对齐项目*/}p型{边距:5px;}<div class=“box”><p>当伸缩方向为列时。。。</p><p>“对齐内容:居中”-垂直对齐</p><p>“对齐项目:居中”-水平对齐</p></div>
flexyboxes是一个很好的地方,可以从Flexbox开始了解它的一些功能并获取语法以获得最大的浏览器支持
此外,现在的浏览器支持非常好:caniuse
为了实现显示的跨浏览器兼容性:调整和对齐项目,可以使用以下选项:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
满足所有垂直对齐需求!
声明此Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
然后将其包含在元素中:
.element{
@include vertical-align();
}
我需要一排可点击的大象,垂直居中,但不用桌子来绕过一些InternetExplorer9的奇怪之处。
我最终找到了最好的CSS(满足我的需要),它与Firefox、Chrome和InternetExplorer11非常配合。遗憾的是,Internet Explorer 9仍然在嘲笑我。。。
第二部分{边框:1px蓝色虚线;显示:内联;线条高度:100px;高度:100px;}跨度{边框:1px纯红色;显示:内联块;线高度:正常;垂直对齐:中间;}.输出{边框:3px纯银;显示:内联块;}<div class=“out”onclick=“alert(1)”><div><span><img src=“http://www.birdfolk.co.uk/littleredsolo.png“/></span></div><div><span>一个可爱的可点击选项</span></div></div><div class=“out”onclick=“alert(2)”><div><span><img src=“http://www.birdfolk.co.uk/bang2/Ship01.png“/></span></div><div><span>点击一些迷人的东西。</span></div></div>
显然,你不需要边界,但它们可以帮助你了解它是如何工作的。
我看到了前面的答案,它们只适用于屏幕的宽度(没有响应)。对于反应灵敏的用户,您必须使用flex。
例子:
div { display:flex; align-items:center; }
尝试此解决方案:
.扩展器{位置:绝对;顶部: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+构建。