zoukankan      html  css  js  c++  java
  • margin auto 实现居中,与text-align:center的区别

    本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定。这些值中,只有width和margin-left,margin-right可以设为auto,text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置。

        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头如下: 

     
    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 声明,否则将不生效.

       5、width、margin-left、margin-right 三个属性各自设置成 auto 的区别:

       三个属性均未设置为auto
      当这三个属性都未被设置为auto时,margin-right总是会被强制设置为auto。这意味着margin-right会被设置成一个值以使框的七属性的值的总和达到父元素的width值。
      
      margin-left、margin-right被显式声明,width被设置为auto
      
      在这种情况下,width被设置为一个值以达到所需要的总宽度。
      
      margin-left、margin-right设置成auto,width显式设定。
      
      这样的话两个边界会被设置成各占50%的宽度,即相同的宽度。这样会使元素在其父元素中居中。
      
      一个边界显式设定,另一个边界和width设置为auto
      
      在这种情况下,设置为auto的边界会被强制的设置为0。而width则会设置成达到总需求所需要的值。
      
      三个属性均被设置为auto
      
      在这种情况下,两个边界会被设置为0,width设置为最大可能值。

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

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

        三种情况需要说明:

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

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

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

  • 相关阅读:
    stylish——一键为网页换肤,改变字体大小,去除广告
    css3实现可以计算的自适应布局——calc()
    用一个div模拟textarea并实现高度自适应
    关于background定位
    CSS3 :nth-of-type() 选择器
    css3圣诞雪景球
    ie6、7、8兼容部分css3
    html5 录制mp3音频,支持采样率和比特率设置
    html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器
    grunt配置太复杂?使用Qbuild进行文件合并、压缩、格式化等处理
  • 原文地址:https://www.cnblogs.com/xuan52rock/p/4459398.html
Copyright © 2011-2022 走看看