我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
当前回答
调整线高度以获得垂直对齐。
line-height: 90px;
其他回答
<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>
2020年的方式
.parent{
display: grid;
place-items: center;
}
这是非常简单的代码,为我工作!它只有一行,你的文本将水平居中。
.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>
输出如下所示:
这应该是正确答案。最干净最简单:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
您可以尝试以下方法:
If you have a single word or one line sentence, then the following code can do the trick. Have a text inside a div tag and give it an id. Define the following properties for that id. id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; } Note: Make sure the line-height property is same as the height of the division. Image But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a division in px or % (when the division is really small and you want the content to be exactly in the middle). To solve this issue, we can try the following combination of properties. id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; } Image These 3 lines of code sets the content exactly in the middle of a division (irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered. Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.