margin auto 实现居中,与text-align:center的区别
来源:互联网 发布:java搭建个人博客系统 编辑:程序博客网 时间:2024/05/16 08:21
一、margin:0 auto;的意思
上下边界为0,左右根据宽度自适应!这就是水平居中的意思,使用 margin:0px auto; 也是大家在做css div定位时的最常用方法。
但是在使用过程中,常有居中不了的情况,下面介绍几种不居中的情况。
1、与 margin:100px 混用,导致无法居中
这种情况下,因为前面设了margin:0px auto; 但是后面又设了margin:100px,这明显是相矛盾的,不仅如此,如果同时使用了margin:0px auto ; 和 float:left ,也一样都不生效。
2、没有指定DOCTYPE
DOCTYPE是指定浏览器以哪一种标准解析html代码,如果不指定,极有可能会不生效。
我们常见有人写html,是直接以<html>开头的,这种情况,我们只要再加上DOCTYPE头即可以,最好是直接从dw中新建一个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;吧,如此一下不仅是div,文字也会居中显示。
然后可以再到细化的css中,把相应容器再设成text-align:left再达到文字靠左的效果。
使用 text-align:center; 居中时不能添加 doctype 声明,否则将不生效.
二、margin auto与text-align:center的区别
text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。margin:0 auto是设置块元素(或与之类似的元素)的居中。
三、三种情况需要说明:
1、有朋友在操作的时候,将margin:0 auto;的选择器混淆了,应该是作用对象,如div,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;}
转载来自:http://www.studyofnet.com/news/41.html
- margin auto 实现居中,与text-align:center的区别
- 居中 margin:0 auto与text-align:center的区别
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中
- margin:0auto与body{text-align:center;}实现元素居中 两种方法的异同
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中
- margin:0 auto 与 text-align:center 的区别
- margin:0 auto 与 text-align:center 的区别
- margin:0 auto 与 text-align:center 的区别
- 【转】margin:0 auto 与 text-align:center 的区别
- margin auto;与text-align:center;的区别
- margin:0 auto 与 text-align:center 的区别 基
- 论text-align:center与margin:0 auto的区别。
- margin:0 auto 和text-align:center的区别是什么???
- text-align:center 和margin:0 auto的区别
- text-align:center 和margin:0 auto的区别
- margin: 0 auto;和text-align: center;的区别
- text-align:center和margin:0 auto的区别
- margin:auto与text-align:center
- 100万需要几年才能翻倍
- 变量的存储类型
- Android实现xrecyclerview+MVP+okhttp一个小案例
- The summary of the tenth week of the first year of master's degree
- AtCoder Regular Contest 085 C题题解
- margin auto 实现居中,与text-align:center的区别
- ActiveMQ(4)-发布订阅
- 输出一个倒三角形
- poj 1328 Radar Installation【贪心】【刷题计划】
- 关于引用数据类型的形参与实参讨论
- PHP编程中尝试程序并发的几种方式总结
- 简单数组
- 指针3
- 判断是不是闰年