复杂子布局在父布局中水平加垂直居中-优快云博客

本文详细介绍了如何使用CSS和Flexbox实现特定的网页布局，包括左一右三的布局结构，通过inline-block和flexbox属性调整元素位置，实现元素的垂直和水平居中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

左侧一个div，右侧3个
基本布局架构：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>cell</title>
</head>

<body>

    <style type="text/css" rel="stylesheet">
        .content {
            color: white;
        }
        
        .row {
            height: 200px;
            background-color: red;
        }
        
        .left {
            background-color: blue;
            display: inline-block;
            width: 100px;
            height: 150px;
        }
        
        .right {
            width: 100px;
            height: 150px;
            background-color: green;
            display: inline-block;
        }
    </style>
    <div class="content">
        <div class="row">
            <div class="left">left</div>
            <div class="right">
                <div class="right1">right1</div>
                <div class="right2">right1</div>
                <div class="right3">right3</div>
            </div>

        </div>
    </div>
</body>

</html>

.left和.right在一行，可以用inline-block来实现不换行
这时候效果图如下：

由于行内元素默认基线对齐,所以会出现这样的效果

设置.row的text-align: center;让元素水平居中
设置行高让元素里的内容垂直居中
设置vertical-align: middle;让行内元素在行内中线对齐

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>cell</title>
</head>

<body>

    <style type="text/css" rel="stylesheet">
        .content {
            color: white;
        }
        
        .row {
            height: 200px;
            background-color: red;
            text-align: center;
            line-height: 200px;
        }
        
        .left {
            background-color: blue;
            display: inline-block;
            width: 100px;
            height: 150px;
            line-height: 150px;
            vertical-align: middle;
        }
        
        .right {
            background-color: green;
            display: inline-block;
            width: 100px;
            height: 150px;
            vertical-align: middle;
        }
        
        .right1 {
            width: 100px;
            height: 50px;
            line-height: 50px;
        }
        
        .right2 {
            width: 100px;
            height: 50px;
            line-height: 50px;
        }
        
        .right3 {
            width: 100px;
            height: 50px;
            line-height: 50px;
        }
    </style>
    <div class="content">
        <div class="row">

            <div class="left">left</div>
            <div class="right">
                <div class="right1">right1</div>
                <div class="right2">right1</div>
                <div class="right3">right3</div>
            </div>

        </div>
    </div>
</body>

</html>

-使用flexbox弹性布局实现此效果非常简单：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .row {
        display: flex;
        flex-direction: row;
        height: 200px;
        background-color: red;
        align-items: center;
        justify-content: center;
        color: white;
    }
    
    .item {
        height: 150px;
        width: 100px;
        text-align: center;
    }
    
    .item.left {
        background: blue;
        line-height: 150px;
    }
    
    .item.right {
        background: green;
    }
    
    .rightitem {
        height: 50px;
        line-height: 50px;
    }
</style>

<body>
    <div class="content">
        <div class="row">
            <div class="left item">left</div>
            <div class="right item">
                <div class="right1 rightitem">right1</div>
                <div class="right2 rightitem">right1</div>
                <div class="right3 rightitem">right3</div>
            </div>
        </div>
    </div>
</body>

</html>

转载于:https://www.cnblogs.com/cowboybusy/p/11459935.html