css margin:0 auto无法居中的原因

时间:2016-07-24
css margin:0 auto可以设置HTML块状元素水平居中,但是对于新手来说,很多时候这个属性并没有取到居中的效果,根本原因在哪里呢?本文章向大家介绍css margin:0 auto无法居的解决办法,需要的朋友可以参考一下。

首先向大家介绍margin:0 auto到底是什么意思,为什么可以用它来实现水平居中。

margin:0 auto表示上下边距为0,左右边距为自适应(大家可以阅读这篇文章了解更多margin的知识),主要是左右边距取到居中的作用,那什么叫自适应呢,自适应就是指在一定宽度的容器里面,根据自身的大小决定显示在什么位置。所以在使用margin:0 auto居中时,一定要设置容器的宽度,如果宽度都没有,那么怎么自适应呢?下面列举两个实例:

 

margin:0 auto设置宽度:

<!DOCTYPE html>
<html>
<head>
<title>   /* http://www.manongjc.com/article/1261.html */</title>
<style>
.box{
    margin:0 auto;
    background:red;
    width:200px;
}
</style>
</head>
<body>
<div class="box">我设置了宽度,所以使用margin:0 auto属性,我会居中显示</div>
</body>
</html>

在线运行

示意图:

css margin:0 auto无法居中的原因

因为DIV设置了宽度,所以相对整个页面,div是居中的

 

margin:0 auto没有设置宽度:

<!DOCTYPE html>
<html>
<head>
<style>
.box{
    margin:0 auto;
    background:red;
}
</style>
</head>
<body>
<div class="box">我没有设置宽度,所以即使使用margin:0 auto属性,我会不会居中显示</div>
</body>
</html>

示意图:

css margin:0 auto无法居中的原因

因为DIV没有设置宽度,所以即使使用了margin:0 auto,也不会取到任何作用。

 

例外,如果我们在html文档开头声明<!DOCTYPE html>(看上面代码),那么,就算你设置了width,margin:0 auto水平居中也可能不取作用。因此在html文档开头最好声明一下<!DOCTYPE html>。至于<!DOCTYPE html>有什么作用,这里我只做简单说明:

DOCTYPE是documenttype(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分!

上一页 下一页

原文地址:http://www.manongjc.com/article/1261.html