我有一个包含文本的<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部分。
其他回答
<!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
我需要一排可点击的大象,垂直居中,但不用桌子来绕过一些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>
显然,你不需要边界,但它们可以帮助你了解它是如何工作的。
尝试转换属性:
#盒子{高度:90px;宽度:270px;位置:绝对;顶部:50%;左:50%;转换:转换(-50%,-50%);}<div Id=“box”>Lorem ipsum dolor坐amet,consectetur adipiscing elit。</div>
一种更好、更简单、更快速的方法是将CSS中的页边空白设置为45%左右:
margin-top: 45%;
你可能需要玩这个数字,但它将位于周围分区的中心。
我不确定是否有人走上了写作模式的道路,但我认为它彻底解决了问题,并得到了广泛的支持:
.垂直{//边框:1px实心绿色;写入模式:垂直lr;文本对齐:居中;高度:100%;宽度:100%;}.水平{//边框:1px纯蓝色;显示:内联块;书写方式:水平tb;宽度:100%;文本对齐:居中;}.内容{文本对齐:左侧;显示:内联块;边框:1px实心#e0e0e0;衬垫:.5em 1em;边界半径:1em;}<div class=“vertical”><div class=“horizontal”><div class=“content”>我以垂直和水平为中心</div></div></div>
当然,这将适用于您需要的任何维度(除了100%的父维度)。如果取消注释边界线,这将有助于熟悉自己。
JSFiddle演示供您摆弄。
犬只支持:85.22%+6.26%=91.48%(甚至Internet Explorer也支持!)