前端技术 手机教程
程序开发 平面动画
系统软件 运营推广
CMS教程 在线手册
资源下载 网络安全
精准搜索请尝试:精确搜索

div居中 div水平居中css代码

2017-08-02 15:18:15 来源:原创 作者:寂静的神经

div水平居中完整代码(兼容所有浏览器):

<html>
<head>
  <title>DIV水平居中</title>
  <style>
   body{text-align:center;}
   .juzhong{margin:0 auto;}
  </style>
</head>
<body>
  <div class="juzhong">本例代码展示了一个div水平居中效果</div>
</body>
</html>

关键CSS代码:

body{text-align:center;}
.juzhong{margin:0 auto;}

关键HTML代码:、

<div class="juzhong">本例代码展示了一个div水平居中效果</div>

详解:

1.text-align属性:规定元素中的文本的水平对齐方式。

参数:left 把文本排列到左边(默认值);right 把文本排列到右边;center 把文本排列到中间;justify 实现两端对齐文本效果;inherit 规定应该从父元素继承 text-align 属性的值。

在本例中,我们通过text-align:center规定在body中的所有html文本默认排列到中间。

2.margin:规定元素四个外边距属性

在本例中,我们通过margin:0 auto规定class为juzhong的div元素的上下外边距为0,左右外边距为调整。

绝大多数现代浏览器通过margin:0 auto就可以实现div水平居中了,但是IE9以下等老版本浏览器还是需要定义父元素text-align:center才可以实现div水平居中。

在线演示:DEMO

代码下载:http://pan.baidu.com/s/1hrRXJCS

分享到:
本文关键词:css div 居中

相关文章

零五科技,分享IT知识,国内顶级IT知识门户网站。

Copyright (C) www.02405.com, All Rights Reserved.

零五科技 版权所有 辽ICP备13002105号-1

//百度 //cnzz