css中的文本水平垂直居中和图片水平垂直居中
程序员文章站
2022-03-02 15:29:43
...
前几天和大佬讨论代码，大佬问我css中有多少中选择器，我蒙了，之前我还信誓旦旦的对大佬说web三门基础随便考，然后就收获的大佬的指导，我也觉得中间隔得时间有点长，就把html，css开始复习了，今天写这个是想起来初学的时候一直对这个垂直居中耿耿于怀，今天碰到了就记下来。
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.zero{
margin: auto;
margin-top: 20px;
width: 300px;
border: solid 10px black ;
height: 100px;
text-align: center; /*文本水平对齐*/
line-height: 100px; /*该属性和height属性一样 垂直对齐*/
}
.one{
vertical-align: middle;/*图片垂直水平对齐*/
}
.two{
width: 500px;
height: 300px;
border: solid 10px black ;
margin: auto;/*div在网页中水平居中*/
/*div在网页中垂直居中*/
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="two">
<div class="zero">
这是一行文字
</div>
<div class="zero">
<img src="images/Logo.png" class="one">
这是一行文字
</div>
</div>
</body>
</html>
你需要在块级元素下，并且该块级元素有明确的宽和高，才能对齐。
记得，在你设置居中 中心 对齐的时候，一定要设置宽和高。
上一篇： 利用css实现图片居中的8中方法
下一篇： css中div中的内容居中
推荐阅读