div水平居中代码

最新推荐文章于 2022-08-20 13:40:56 发布

weixin_30347009

最新推荐文章于 2022-08-20 13:40:56 发布

阅读量162

点赞数

原文链接：http://www.cnblogs.com/guangyuan/p/7069819.html

版权

如何使用CSS让DIV居中显示，让div水平居中有哪些CSS样式呢？

需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。

首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。

实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px，边框为红色。以便我们观察效果。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>div 居中</title>
    <style>
        body{
            text-align: center;
        }
        .div{
            margin: 0 auto;
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        /*为了观察效果设置宽带 边框 高度等形式*/
    </style>
</head>
<body>
<div class="div">
    dddddddd
</div>
</body>
</html>

转载于:https://www.cnblogs.com/guangyuan/p/7069819.html

weixin_30347009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div水平居中代码

如何使用CSS让DIV居中显示，让div水平居中有哪些CSS样式呢？需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平...
复制链接

扫一扫