css样式—字体垂直、水平居中

“来，老板娘，给个div瞅瞅”：

“好的，宇哥，来了了了”：

<div class="tt">啦啦啦</div>

“给各样啊，我去”：

“是”：

.tt{
            padding: 0px;
            width:500px;
            height:200px;
            text-align:center;
            background-color:#F69;

            display: table-cell;
            vertical-align:middle
        }

为啥呢，这是。好吧。看样式中  display: table-cell  ，做为表格单元格显示，如此一来， vertical-align:middle  属性起做用了。去掉display可就不行了哦！！

 

一：

　　首先，依旧是概念。介绍一下行内元素和块级元素，这个很重要，由于有的属性只能用于块元素，而有的正好相反，在必定的状况下，它们也能够相互转换，好比用display来进行设置。

1.行内元素(又叫内联元素inline element):

　   (1) 不占据一整行，随内容而定，有如下特色：

　   (2) 不能够设置宽高，也不能够设置行高，其宽度随着内容增长，高度随字体大小而改变。

　　(3) 内联元素能够设置外边界，可是外边界不对上下起做用，只能对左右起做用。

　　(4) 也能够设置内边界，可是内边界在ie6中不对上下起做用，只能对左右起做用。

 

　　经常使用的内联元素有：a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，

select - 项目选择，small - 小字体文本，span - 经常使用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调

 

1.块级元素block element:

　   (1) 老是在新行上开始，占据一整行;

　   (2) 高度，行高以及外边距和内边距均可控制;

　　(3) 宽度始终是与浏览器宽度同样，与内容无关;

　　(4) 它能够容纳内联元素和其余块元素。

 

　　经常使用的块级元素有：div -最经常使用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序

列表互相转换：使用display设置可使得行内元素拥有块级元素的特性，反之也能够。

　　

2、如今开始说一下简单的几种基础的居中方式

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

　　这个属性只能做用于块元素(或者被CSS控制为块元素的内联元素，可是被控制为内联元素的块元素是不行的)。一句话来讲，就是要拥有块元素的特色的那些元素。这个很好理解，居中，确定是行居中，若是使用它的元素自己不拥有完整的在宽度上的独立空间，它固然没有能力让它内部的文字或者图片居中。

　　父元素的这个属性对它下面的子元素也起做用，好比一个div设置了text-align居中，则它内部的文字能够居中，它的子div内部的文字也能够居中。可是子元素中文字的居中，是在子div中居中，而不是对于父div居中。也就是，它里面全部的文字，都会相对于最靠近本身的一层div来实现居中。因此，这个属性不能用于div在父div中的总体居中。(不只仅是div，全部的表现为块元素的元素)。

 

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，这个能够用的很复杂。看了一些文章和例子，本身也有点小混乱，只说一下最简单的用法：

　　这个属性用于

　　一、内联元素(以及被转化为内联元素的块元素)

　　2 、display设置为table-cell的元素，

　　在 firefox 和 ie8 下，能够设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显示效果和就和表格中的 valign="center" 同样了。但 ie6,7 并不支持。

　　三、<td><tr>这样的元素

　　　　这样的写法：vertical-align:middle;就能够设置文字或者图片的垂直居中。只要具备行内元素的特性的元素使用这个属性，对它的子元素中的文字和图片也是起做用的。可是做用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是相似的。

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

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

<div style="line-height:500px;height:500;"></div>

 

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

　　在块的高度不肯定的状况下，其实它的高度就是取决于里面内容的高度。若是内部只有文字或者图片的话，那就天然垂直居中了，其实就没必要特地要设置。

　　若是非要设置什么的话，好比但愿块大一些，文字在块中垂直居中好看一点，能够设置内边距，如padding-top:20px;padding-bottom:20px;

　　固然，若是上下内边距设置的不同，就天然不居中了。

 

7 块级元素自身的垂直居中

　　设置块级元素自身在父元素中的垂直居中，能够参照块级元素的水平居中的方法(上面说过)，设置外边距便可。若是不想设置水平居中，只要设置上下外边距为auto就好。

　　也能够采用vertical-align:middle;的方式，可是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。