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

2016-3-10 22:54 来自本站原创 7,773 3 7
[摘要]

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

作为一名草根站长,折腾网站几乎是每天必修课,有时在调整网页效果的时候就需要一些Web前端知识。笔者初学CSS,一个问题困扰我许久了,那就是CSS中margin: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:leftrightright,否则会失效
  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;}

本文最后更新于2016年10月13日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    已是本栏目最后文章
    目前评论:3   其中:访客  3   博主  0
    加载中...
    1. 刀客 1
      1年前 (2017-08-18) 板凳

      帮助很大,说的很清楚明白。谢谢

    2. 3年前 (2016-03-14) 椅子

      学习了。

    3. 3年前 (2016-03-11) 沙发

      CSS里看到这些就晕菜了!还是万能的“百度”呀!

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    3 7 7,773
    Top