margin布局居中显示

最新推荐文章于 2025-01-15 11:17:26 发布

原创最新推荐文章于 2025-01-15 11:17:26 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#margin布局居中显示

margin布局居中显示专栏收录该内容

1 篇文章

订阅专栏

本文通过一个具体的HTML页面实例展示了如何使用CSS的margin属性来实现元素的居中布局。通过设置左右margin为auto并规定宽度或高度，可以让块级元素在页面上水平居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 500px;
            height: 200px;
            background-color: #cccccc;
            /*布局居中显示*/
            margin: 0 auto;
        }

    </style>
    <title>margin布局居中显示</title>
</head>
<body>
<div>
    笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。
    笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。笑的大方，走的坦荡。
    笑的大方，走的坦荡。
</div>
</body>
</html>