您的位置：首页 > Web前端 > css > 正文

margin auto 实现居中，与text-align:center的区别

更多时间：2013-8-1 类别：Web前端浏览量：6748

margin auto 实现居中，与text-align:center的区别

margin auto 实现居中，与text-align:center的区别

一、margin:0 auto;的意思

上下边界为0，左右根据宽度自适应！这就是水平居中的意思，使用 margin:0px auto; 也是大家在做css li定位时的最常用方法。

但是在使用过程中，常有居中不了的情况，下面介绍几种不居中的情况。

1、与 margin:100px 混用，导致无法居中　
　　　　　　　　　　　　
这种情况下，因为前面设了margin:0px auto; 但是后面又设了margin:100px，这明显是相矛盾的，不仅如此，如果同时使用了margin:0px auto ; 和 float:left ，也一样都不生效。　

2、没有指定DOCTYPE　
　　　　　　　　　　
DOCTYPE是指定浏览器以哪一种标准解析html代码，如果不指定，极有可能会不生效。　

我们常见有人写html，是直接以<html>开头的，这种情况，我们只要再加上DOCTYPE头即可以，最好是直接从dw中新建一个html头，然后从中再做修改。完整的html头如下:　

HTML 代码复制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
主题内容
</body>
</html>

3、DOCTYPE前还有代码，导致不生效　
　　　　　　　　　
在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这一句前加了一个这样的注释，也同样出现了margin:0px auto;无法居中的情况。

　
4、如果上面的几种方法还是不能够居中，则可以用 text-align:center

这是下下之策，如果上面margin:0px auto;用了怎么都不行，那到body中加上text-align:center;吧，如此一下不仅是li,文字也会居中显示。　　

然后可以再到细化的css中，把相应容器再设成text-align:left再达到文字靠左的效果。

使用 text-align:center; 居中时不能添加 doctype 声明，否则将不生效.

二、margin auto与text-align:center的区别

text-align:center设置为文本或img标签等一些内联对象（或与之类似的元素）的居中。margin:0 auto是设置块元素（或与之类似的元素）的居中。

三、三种情况需要说明：

1、有朋友在操作的时候，将margin:0 auto;的选择器混淆了，应该是作用对象，如li，p，而不是body。如果设置：body { margin:0 auto; }将不会达到任何效果，除非你定义body的宽度，那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置，我们最大化窗口将会看到段落并非处于窗口的最左上角。

2、我们设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式，而是段落内元素居中对齐。

3、我们设置图片标签img {margin:0 auto;} ，我们就犯了一个小错误，img类于内联对象，不可以设置图片img标签的margin属性，如果你一定想要设置，那么首先要将它的属性转变为块元素，如下面的代码：img {display:block; margin:0 auto;}

标签：css margin auto text-align

上一篇：CSS边框border样式缩写

下一篇：SQL Server日期与字符串之间的转换

您可能感兴趣

margin auto 实现居中，与text-align:center的区别

margin auto 实现居中，与text-align:center的区别

热门推荐

排行榜