我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
当前回答
方法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 >
其他回答
调整线高度以获得垂直对齐。
line-height: 90px;
Use:
# Parent
{
display: table;
}
# Child
{
display: table-cell;
width: 100%; /* As large as its parent to center the text horizontally */
text-align: center;
vertical-align: middle; /* Vertically align this element on its parent */
}
我总是在容器中使用以下CSS,使其内容水平和垂直居中。
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
在这里查看它的实际操作:https://jsfiddle.net/yp1gusn7/
对我来说,这是最好的解决方案:
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%);
}
这适用于我(测试OK!):
HTML:
<div class="mydiv">
<p>Item to be centered!</p>
</div>
CSS:
.mydiv {
height: 100%; /* Or other */
position: relative;
}
.mydiv p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%); /* To compensate own width and height */
}
您可以选择50%以外的其他值。例如,25%到父母的25%的中心。