CSS元素居中margin:0 auto和text-align:center有什么区别?

王小优
王小优
王小优
231
文章
0
评论
2015年11月16日 评论 2,747 1555字阅读5分11秒

CSS中margin:0 auto和text-align:center都能使元素居中,会有不少初学者会问到:它们两个到底有什么区别呢?

作为一名草根站长,折腾网站几乎是每天必修课,有时在调整网页效果的时候就需要一些Web前端知识。博主初学CSS,一个问题困扰我许久了,那就是CSSmargin:0 autotext-align:center都能使元素居中,它们有什么区别呢?

CSS元素居中margin:0 auto和text-align:center有什么区别?

首先需要对这两个属性的基本概念作下了解:

属性基本概念

1、margin是指当前元素到相邻元素间的距离;margin:0 auto的意思就是上下边界为0,左右根据宽度自适应,这就是水平居中的意思。

2、text-align是指当前元素中内容的对其方式。注释:所有浏览器都支持text-align属性;任何的版本的Internet Explorer(包括 IE8)都不支持属性值"inherit"。

二者间的区别

1、margin:0 auto设置块元素(或与之类似的元素)的居中。如:

  1. <div  style="width:500px;height:200px;border:1px solid #000000;margin:0 auto;">
  2. 使用margin:0 auto;后不要设置float:left和rightright,否则会失效
  3. </div>

通俗的讲:就是让容器中的自己居中,常作用于块元素,且需要配合宽度使用。

2、text-align:center设置文本或img标签等一些内联对象(或与之类似的元素)的居中。如:

  1. <div style="width:500px;height:200px;border:1px solid #000000;margin:0 auto;text-align:center;">
  2. 使用text-align:center;后,此div中的内容会居中
  3. </div>

通俗的讲:就是让自己容器中的元素居中,常作用于文本或图片等内联元素。

通常情况下text-align: center的方式就可以满足居中对齐的方式,但页面布局时存在两个特殊情况:position: absolute和position: fixed,这两种情况下的元素会脱离布局流,而导致无法正确居中,这时如要使其居中,需要配合多个CSS属性使用:

IE和火狐浏览器中的区别

1、当设置body{text-align:center;}。在IE浏览器中,段落P,图片img同时实现了居中对齐,也就是说text-align:center同时作用于元素p与元素img。 在火狐浏览器中,段落P,没有能实现居中对齐,而图片img实现了居中对齐,也就是说text-align:center作用于img标签,而段落p标签没有起到居中的作用。

2、当设置段落p {margin:0 auto;}。 在IE与火狐中,段落P均实现了居中对齐。图片img由于不是作用对象,所以不会居中对齐。

有三种情况需要说明:

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;}。

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
CSS样式表属性最佳书写顺序是怎样的? CSS

CSS样式表属性最佳书写顺序是怎样的?

混乱的CSS属性书写顺序会对网页的加载渲染造成影响,拖慢页面加载速度。一个规范的CSS属性书写属性也是网页优化的组成部分,值得每一位前端爱好者重视。 这段时间稍微整理了一下之前写的样式表,就来说下CS...
一段CSS代码让你的广告位“立起来” CSS

一段CSS代码让你的广告位“立起来”

很多网站上都会投放广告,但一般情况下广告都不那么“好看”,如果我们对广告位稍微进行美化,说不定能出人意料呢。 广告对于网站来说一直是一把双刃剑,既能给网站带来利益又很有可能影响用户体验,特别是广告联盟...
常用的几个CSS前端效果 更轻松的写页面 CSS

常用的几个CSS前端效果 更轻松的写页面

本文收集了20多个常用的CSS效果,在写页面的时候可以直接使用,不用再一遍一遍的做无用功了,大大提高了开发效率。 做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如Bootstrap等,我们轻松...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: