我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
当前回答
调整线高度以获得垂直对齐。
line-height: 90px;
其他回答
使用flexbox / CSS:
<div class="box">
<p>അ</p>
</div>
CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
摘自《快速提示:垂直和水平居中元素的最简单方法》
方法1
div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; } < div > 你好,世界! ! < / div >
方法2
div { 身高:200 px; 行高:200 px; text-align:中心; 边界:2px虚线#f69c55; } 跨度{ 显示:inline-block; vertical-align:中间; 行高:正常; } < div > <span>我与你同在,我与你同在。对我说,对我说,对我说。非enim iam stirpis bonum quaeret, sed animalis。< / span > < / div >
方法3
div { 显示:表; 身高:100 px; 宽度:100%; text-align:中心; 边界:2px虚线#f69c55; } 跨度{ 显示:表格单元; vertical-align:中间; } < div > <span>神圣的神圣,神圣的神圣。</span> < / div >
对我来说,这是最好的解决方案:
HTML:
<div id="outer">
<img src="logo.png">
</div>
CSS:
#outer {
position: fixed;
top: 50%;
left: 50%;
/* Bring your own prefixes */
transform: translate(-50%, -50%);
}
这招对我很管用:
.center-stuff{
text-align: center;
vertical-align: middle;
line-height: 230px; /* This should be the div height */
}
<div class="small-container">
<span>Text centered</span>
</div>
<style>
.small-container {
width:250px;
height:250px;
border:1px green solid;
text-align:center;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.small-container span{
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>