UcHome

关注公众号 jb51net

关闭
CMS教程 > UcHome >

css div居中布局及居右布局

jb51

概述

居中布局是最基本的布局方式，下面会通过示例展示如何设置css样式实现居中布局

居中示例

<body>
    <div style="display: flex;">
        <!--不设置样式，左上角对齐-->
        <div class="first-div">
            <div class="second-div">
            </div>
        </div>
        <div class="first-div center-one">
            <div class="second-div"> 
            </div>
        </div>
        <div class="first-div" style="display: flex;">
            <div class="second-div center-inner"> 
            </div>
        </div>
    </div>
    <style>
        .first-div
        {
            width:100px;height: 100px; 
            margin-left:10px;
            background: gray;
        }
        .second-div
        {
            width:50px;height: 50px;background: green;
        }
        .center-one
        {
            display: flex; 
            align-items: center;
            justify-content: center;
        }
        .center-inner
        {
            margin: auto;
        }
    </style>
</body>

居中分析

<body>
    <div style="display: flex;">
        <!--不设置样式，左上角对齐-->
        <div class="first-div">
            <div class="second-div">
            </div>
        </div>
        <div class="first-div">
            <div class="second-div right-one"> 
            </div>
        </div>
        <div class="first-div right-two">
            <div class="second-div"> 
            </div>
        </div>
    </div>
    <style>
        .first-div
        {
            width:100px;height: 100px; 
            margin-left:10px;
            background: gray;
        }
        .second-div
        {
            width:50px;height: 50px;background: green;
        }
        .right-one
        {
            float: right;
        }
        .right-two
        {
            display: flex;
            justify-content: right;
        }
    </style>
</body>

居右分析

display: flex;
justify-content: right;

到此这篇关于css div居中布局及居右布局的文章就介绍到这了,更多相关css div居中布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！