我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
当前回答
使用flexbox / CSS:
<div class="box">
<p>അ</p>
</div>
CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
摘自《快速提示:垂直和水平居中元素的最简单方法》
其他回答
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 */
}
在父div中添加以下代码
display: grid;
place-items: center;
使用flexbox / CSS:
<div class="box">
<p>അ</p>
</div>
CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
摘自《快速提示:垂直和水平居中元素的最简单方法》
添加行显示:table-cell;到该div的CSS内容。
只有表格单元格支持vertical-align: middle;,但是你可以把[table-cell]定义给div…
一个活生生的例子在这里:http://jsfiddle.net/tH2cc/
div{
height: 90px;
width: 90px;
text-align: center;
border: 1px solid silver;
display: table-cell; /* This says treat this element like a table cell */
vertical-align:middle; /* Now we can center vertically like in a TD */
}
这是非常简单的代码,为我工作!它只有一行,你的文本将水平居中。
.center-horizontally{
justify-content: center;
}
<Card.Footer className="card-body-padding center-horizontally">
<label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>
输出如下所示: