css中的文本水平垂直居中和图片水平垂直居中

最新推荐文章于 2023-04-30 15:50:55 发布

yangunity

最新推荐文章于 2023-04-30 15:50:55 发布

阅读量212

点赞数

分类专栏：笔记文章标签： css3 html css html5

本文链接：https://blog.csdn.net/uajsd/article/details/113991433

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前几天和大佬讨论代码，大佬问我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>

你需要在块级元素下，并且该块级元素有明确的宽和高，才能对齐。

记得，在你设置居中中心对齐的时候，一定要设置宽和高。