美文网首页
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实现布局水平居中

    CSS为网页设计带来了全新的布局方法。 而div标签是CSS布局的主力元素,其优势非常明显,相对于表格布局,div...

  • CSS布局与水平垂直居中

    左右布局 左中右布局 水平居中 垂直居中 水平垂直居中 左右布局 float实现左右布局 子元素设置float: ...

  • [2020-08-10]css3中的常用几种布局

    div的水平垂直居中 flex布局,使用display: flex实现水平垂直居中 grid布局 使用grid布局...

  • CSS布局

    定宽+水平居中实现单列布局 定宽+水平居中实现单列布局(通栏) 代码:http://js.jirengu.com/...

  • CSS布局(不完全)总结

    CSS布局(不完全)总结 实现水平居中布局的几种方式 方法一: 通过以下CSS代码实现水平居中布局 方法二: 通过...

  • css几个经典布局实例

    一、水平居中   水平居中的页面布局中最为常见的一种布局形式,多出现于标题,下面介绍几种实现水平居中的方法。   ...

  • 用CSS实现元素居中的N种方法

    网页布局中,元素水平居中比垂直居中简单不少,同时实现水平垂直居中也不难,难的是想出多种实现水平垂直居中的方法并从中...

  • 页面布局的几种方式

    居中布局 一、水平居中布局 水平居中:absolute + transform: translateX(-50%)...

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • CSS常用布局实现

    该系列用于整理记录常用的CSS布局实现。 CSS常用布局实现01-水平居中 CSS常用布局实现02-垂直居中 CS...

网友评论

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

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