CSS里的各种水平垂直居中基础写法

三、几种基础居中方式


       1.块中文字水平居中:text-align 用于块级元素,作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。

  这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素,但是被控制为内联元素的块元素是不行的)。一句话来说,就是要拥有块元素的特点的那些元素。这个很好理解,居中,肯定是行居中,如果使用它的元素本身不拥有完整的在宽度上的独立空间,它当然没有能力让它内部的文字或者图片居中。(难道要占用别人的地盘里居中,岂不混乱啦)
  例子:
  1. 我是正常p,我设置了居中


  2.     我其实是一个行内元素span哦,我设置了居中,可以居中并且独占一行 
  3.    

    能不能再同一行,我是被inline了的p,我设置了居中可是不能居中!

复制代码
运行代码 复制代码 保存代码 提示:您可以先修改部分代码再运行! power by W3Cfuns.com
       父元素的这个属性对它下面的子元素也起作用,比如一个div设置了text-align居中,则它内部的文字可以居中,它的子div内部的文字也可以居中。但是子元素中文字的居中,是在子div中居中,而不是对于父div居中。也就是,它里面所有的文字,都会相对于最靠近自己的一层div来实现居中。所以,这个属性不能用于div在父div中的整体居中。(不仅仅是div,所有的表现为块元素的元素)。

  下面的这段代码,外面一个大的蓝色的div,里面一个小的红色的div。外部的div设置了水平居中,按说里面的图片肯定会居中(运行时确实显示居中),
  而内部的div只设置了vertical-align,垂直居中(先不管它)。可是因为它父层的text-align对它也有影响,所以运行时,里面的文字会相对于内部div而居中(注意!不是相对于最外面的div)

  1.         
  2.         
    啦啦啦

复制代码
运行代码 复制代码 保存代码 提示:您可以先修改部分代码再运行! power by W3Cfuns.com
这个是块元素对内处理的一个属性,不能把这个块自己在它的父容器中居中,若要实现块在父元素中的居中,可以使用:

       2.块元素自身水平居中(确定设置了宽度的块):margin。这个肯定是接触CSS一开始就知道的了。

  一般情况下,可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中,上下左右都会居中。
  如果只要水平居中的话,就设置margin-left:auto;margin-right:auto;

        3 块元素自身水平居中(不确定宽度的块):

  在其他的一些文章中,看到有不少方法来介绍不确定宽度的块的居中的。
  其实简单点说,不需要这么麻烦。我们可以这样来理解,没有明确设定宽度的block,根据块级元素的性质,它默认是独占一行的,所以这个时候block本身就是浏览器窗口的宽度,就不必要来设置水平居中了。

  若是此时对块中的内容进行居中的话:
  如果块元素的子元素也为块元素,就对子元素使用margin auto一类的方式就好啦;
  如果块级元素的子元素为行内元素,就用我们一开始介绍的text-align也就可以解决;
  对于子元素为块元素的,也可以用display设置为inline然后再用text-align。
  (这些在本文其他地方也都说过了)

  4. vertical-align用于行内元素中的垂直居中
  vertical-align,这个可以用的很复杂。看了一些文章和例子,自己也有点小混乱,只说一下最简单的用法:
  这个属性用于
  1、内联元素(以及被转化为内联元素的块元素)
  2 、display设置为table-cell的元素,
  在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。
  3、这样的元素
    这样的写法:vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性,对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。

  5 块级元素中的文字图片垂直居中(针对块的高度确定的,这个是从另一个博客上看到的,真的很实用哦,如果块内只有这些文字的话)

  文字在层(块级元素)中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

  6 块级元素中的文字图片垂直居中(块的高度不确定的)

  在块的高度不确定的情况下,其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话,那就自然垂直居中了,其实就不必特意要设置。
  如果非要设置什么的话,比如希望块大一些,文字在块中垂直居中好看一点,可以设置内边距,如padding-top:20px;padding-bottom:20px;
  当然,如果上下内边距设置的不一样,就自然不居中了。

  7 块级元素自身的垂直居中
  设置块级元素自身在父元素中的垂直居中,可以参照块级元素的水平居中的方法(上面说过),设置外边距即可。如果不想设置水平居中,只要设置上下外边距为auto就好。
  也可以采用vertical-align:middle;的方式,但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。

你可能感兴趣的:(语言-CSS+DIV。)