day 4 居中和图文结合-CSDN博客

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124201855

一、居中

1）当line-height=height时，文本垂直居中；

2）text-align:center写在父级，子级中的行元素、行块元素，文本内容水平居中；

3）margin：0 auto写在块标签，相对于父级水平居中。（当margin给两个值时，第一个值是上下边距，第二个值是左右边距）。

二、图文结合

图文结合案例：

<!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>demo5</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .rap{
            width: 700px;
            height: 800px;
        }
        .rap .t{
            width: 700px;
            height: 122px;
            overflow: hidden;
        }
        .rap .t img{
            width: 92px;
            border: 1px solid #eaeaea;
            border-radius: 50%;
            margin-left: 24px;
            margin-top: 15px;
            float: left;
        }
        .rap .t .c{
            width: 380px;
            height: 122px;
            margin-left: 20px;
            overflow: hidden;
            float: left;
        }
        .rap .t .c .a{
            height: 40px;
            line-height: 40px;
            color: #333;
            font-size: 36px;
            margin-top: 15px;
        }
        .rap .t .c .b{
            height: 40px;
            line-height: 40px;
            margin-top: 4px;
            font-size: 32px;
            color: #969696;
        }
        .rap .t  .r{
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
            float: right;
            margin-right: 36px;
            margin-top:41px;
            font-size: 36px;
            color: #3dbf40;
        }
    </style>
</head>
<body>
    <div class="rap">
        <div class="t">
            <img src="img5/1.webp" alt="">
            <div class="c">
                <p class="a">卢璐说</p>
                <p class="b">写了2133.8k字·34.7k喜欢</p>
            </div>
            <p class="r">+关注</p>
        </div>
        <div class="t">
            <img src="img5/2.webp" alt="">
            <div class="c">
                <p class="a">简书钻首席小管家</p>
                <p class="b">写了458.9k字·115.3k喜欢</p>
            </div>
            <p class="r">+关注</p>
        </div>
        <div class="t">
            <img src="img5/3.webp" alt="">
            <div class="c">
                <p class="a">格列柯南</p>
                <p class="b">写了722.5k字·18.4k喜欢</p>
            </div>
            <p class="r">+关注</p>
        </div>
        <div class="t">
            <img src="img5/4.webp" alt="">
            <div class="c">
                <p class="a">Hobbit霍比特人</p>
                <p class="b">写了429.5k字·1.9k喜欢</p>
            </div>
            <p class="r">+关注</p>
        </div>
        <div class="t">
            <img src="img5/5.webp" alt="">
            <div class="c">
                <p class="a">梅拾璎</p>
                <p class="b">写了265.5k字·31.5k喜欢</p>
            </div>
            <p class="r">+关注</p>
        </div>
    </div>
</body>
</html>

效果：