使用css代码实现div居中显示 div水平居中显示

最新推荐文章于 2023-09-20 13:51:42 发布

徊忆羽菲

最新推荐文章于 2023-09-20 13:51:42 发布

阅读量4.3k

点赞数

分类专栏： Html 文章标签： css css3 html

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/122367577

版权

Html 专栏收录该内容

242 篇文章 7 订阅

订阅专栏

使用css代码实现div居中显示 div水平居中显示

- 属性
- 居中显示

属性

需要的主要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> 
    <meta charset="utf-8" /> 
    <title>div居中 在线演示</title> 
    <style> 
    body{ text-align:center} 
    .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
    /* css注释：为了观察效果设置宽度 边框 高度等样式 */ 
    </style> 
    </head> 
    <body> 
    <div class="div"> 
    DIVCSS5实例 
    </div> 
    </body> 
    </html>

徊忆羽菲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用css代码实现div居中显示 div水平居中显示

使用css代码实现div居中显示 div水平居中显示属性居中显示属性需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为**margin:0 auto；**其两个样式需要配合使用才能实现div盒子的居中显示排版。首先我们对body设置text-align:center，再对需要居中的div盒子设置css样式margin:0 auto，这样即可让对应div水平居中。实例讲解div居中代码应用，为了观察div居中效果，我们对div设置一个div命名为“.div”在
复制链接

扫一扫