我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
当前回答
你可以在父div中使用flex属性,并将margin:auto属性添加到子条目中:
.parent {
display: flex;
/* You can change this to `row` if you want the items side by side instead of stacked */
flex-direction: column;
}
/* Change the `p` tag to what your items child items are */
.parent p {
margin: auto;
}
你可以在这里看到更多flex的选项:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
其他回答
调整线高度以获得垂直对齐。
line-height: 90px;
这应该是正确答案。最干净最简单:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
你可以在父div中使用flex属性,并将margin:auto属性添加到子条目中:
.parent {
display: flex;
/* You can change this to `row` if you want the items side by side instead of stacked */
flex-direction: column;
}
/* Change the `p` tag to what your items child items are */
.parent p {
margin: auto;
}
你可以在这里看到更多flex的选项:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这是非常简单的代码,为我工作!它只有一行,你的文本将水平居中。
.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>
输出如下所示:
使用flexbox / CSS:
<div class="box">
<p>അ</p>
</div>
CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
摘自《快速提示:垂直和水平居中元素的最简单方法》