CSS布局小技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65752158/article/details/145912272

1. 行内元素、行内块元素，可以被父元素当做文本处理。

即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。

例如： text - align 、 line - height 、 text - indent 等。

2. 如何让子元素，在父亲中 水平居中 ：

若子元素为 块元素 ，给子元素加上： margin:0 auto ; 。

若子元素为 行内元素 、 行内块元素 ，给父元素加上： text - align:center 。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局小技巧01</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            /* 解决margin塌陷问题 */
            overflow: hidden;
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            text-align: center;
            /* 水平居中 */
            margin: 0 auto;
            /* line-height和height相等就是文字垂直居中 */
            line-height: 100px;
            margin-top: 150px;

        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner">inner</div>
    </div>
</body>

</html>

3. 如何让子元素，在父亲中 垂直居中 ：

若子元素为 块元素 ，给子元素加上： margin - top ，值为： ( 父元素 content －子元素盒子

总高 ) / 2 。

若子元素为 行内元素 、 行内块元素 ：

让父元素的 height = line - height ，每个子元素都加上： vertical

align:middle ; 。

补充：若想绝对垂直居中，父元素 font - size 设置为 0 。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局小技巧02</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            text-align: center;
            line-height: 400px;
    
        }

        .inner {
            width: 200px;
            height: 100px;
            background-color: gold;
            font-size: 40px;
           
            vertical-align: middle;
         
        

            

        }
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">
            出来玩呀
        </span>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局小技巧03</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            /* 子元素在父元素上水平居中 */
            text-align: center;
     
            /* 子元素垂直居中 */
            line-height: 400px;
        
           
        }

        .inner {
            width: 50px;
            height: 50px;
            background-color: gold;
        }
        img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="outer">
        <span class="inner">
            出来玩呀        
        </span>
        <img src="../悟空.jpg" alt="">
    </div>
</body>

</html>