我有一个包含文本的<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>
实现这一目标的最佳方式是什么?
当前回答
我看到了前面的答案,它们只适用于屏幕的宽度(没有响应)。对于反应灵敏的用户,您必须使用flex。
例子:
div { display:flex; align-items:center; }
其他回答
我需要一排可点击的大象,垂直居中,但不用桌子来绕过一些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>
显然,你不需要边界,但它们可以帮助你了解它是如何工作的。
您可以通过添加以下CSS代码轻松完成此操作:
display: table-cell;
vertical-align: middle;
这意味着您的CSS最终看起来像:
#盒子{高度:90px;宽度:270px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;文本对齐:居中;页边空白:20px;左边距:5px;显示:表格单元格;垂直对齐:中间;}<div id=“box”>一些文本</div>
如果你不在乎它的视觉3D效果,就在button而不是div中设置它。
#盒子{高度:120px;宽度:300px;背景:#000;字体大小:48px;字体样式:倾斜;颜色:#FFF;}<button Id=“box”禁用>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</按钮>
您还可以使用以下财产。
display: flex;
align-content: center;
justify-content : center;
请尝试以下代码:
display: table-cell;
vertical-align: middle;
第二部分{高度:80%;宽度:100%;文本对齐:居中;显示:表格单元格;垂直对齐:中间;背景:#4CAF50;颜色:#fff;字体大小:50px;字体样式:斜体;}<div>Lorem Ipsum只是印刷和排版行业的虚拟文本。自15世纪以来,Lorem Ipsum一直是业界的标准虚拟文本</div>