我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
我有一个div设置显示:块(90px高和宽),我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center,但它不做垂直居中部分,所以我尝试了vertical-align:middle,但它不起作用。
什么好主意吗?
当前回答
<!DOCTYPE html>
<html>
<head>
<style>
.maindiv {
height: 450px;
background: #f8f8f8;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
p {
font-size: 24px;
}
</style>
</head>
<body>
<div class="maindiv">
<h1>Title</h1>
</div>
</body>
</html>
其他回答
<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>
div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; } < div > 你好,世界! ! < / div >
GRID
.center {
display: grid;
justify-items: center;
align-items: center;
}
.center { 显示:网格; justify-items:中心; 对齐项目:中心; } .box { 宽度:200 px; 身高:100 px; 背景:红色; } <div class="box center">我的文本</div>
这应该是正确答案。最干净最简单:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
应用样式:
position: absolute;
top: 50%;
left: 0;
right: 0;
无论长度如何,文本都将居中。