容器的高度height使用百分比时,如何设置可以使里面的文字垂直居中。
当我们给容器高度设置为百分比时,想让其中的文字垂直居中如果设置line-height:100%;效果如下:并没有什么作用 代码: <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
·
当我们给容器高度设置为百分比时,想让其中的文字垂直居中
如果设置line-height:100%;效果如下:并没有什么作用
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0px;margin:0px;}
body,html{width:100%;height:100%;}
.parent{height:80%;width:50%;margin:0 auto;}
.son{height:10%;text-align:center;line-height:100%;border:1px solid darkslategray;}
</style>
</head>
<body>
<div class="parent">
<div class="son">垂直居中内容</div>
</div>
</body>
</html>
目前我采用的方法是父元素使用display:table;子元素使用display:table-cell;vertical-align:middle;
效果图如下:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding:0px;margin:0px;}
body,html{width:100%;height:100%;}
.parent{height:80%;width:50%;margin:0 auto;}
.son{height:10%;width:100%;text-align:center;border:1px solid darkslategray;display:table;}
.son span{display:table-cell;vertical-align:middle;}
</style>
</head>
<body>
<div class="parent">
<div class="son"><span>垂直居中内容</span></div>
</div>
</body>
</html>
更多推荐
已为社区贡献2条内容
所有评论(0)