美文网首页
Div+CSS实现布局水平居中

Div+CSS实现布局水平居中

作者: 南湘嘉荣 | 来源:发表于2021-05-10 12:18 被阅读0次

    CSS为网页设计带来了全新的布局方法。

    而div标签是CSS布局的主力元素,其优势非常明显,相对于表格布局,div更加灵活。

    div标签就是没有任何特性的容器,属于块状元素。

    通常使用html布局表格布局页面时。只要设置布局表格的align属性为center就可以实现水平居中的效果了,但是div没有数据属性可以设置,只能通过CSS控制。

    实现div水平居中的方法有很多,常用的方法是用CSS设置div的左右边距,即margin-left属性、margin-right属性。

    当设置div左右外边距的值为auto,即自动时,左右外边距将相等,这样就达到了div水平居中的效果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Div布局水平居中</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            #align {
                width: 75%;
                height: 200px;
                background-color: #999999;
                border: 1px solid #000;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <div id="align">
            这是div块,水平居中效果
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:Div+CSS实现布局水平居中

          本文链接:https://www.haomeiwen.com/subject/jmtidltx.html