CSS使用技巧(一)

  在css的使用中，有很多小技巧，今天就谈一谈css使用中的文本设置。

  在很多时候，我们都会用到文本的水平居中设置，例如文章的标题，为了显得好看，我们一般设置的就是水平居中。不同的html元素设置水平居中的方法不同。

  1.行内元素

  对于行内元素，设置水平居中，如果被设置元素为文本、图片等元素，只需要在父元素中设置text-align:center即可。

  2.块状元素

  对于块状元素，text-align:center是不起作用的，那么我们该如何设置呢，这里分两种情况：

  1）定宽的块状元素

  设置左右margin(外边距)值为auto。例如：margin:10px auto。当然前提是元素的宽度是确定的，即width有确定的值，例如：width:200px。

  2）不定宽的块状元素

  对于不定宽的块状元素，设置水平居中的方式有三种：

  a.加入table标签

  为什么要加入table标签呢，原来table标签有一个特性-----自适应长度，不定义其长度也不默认body的长度(table的长度是根据其内容的长度来定的)。可以看作一个定宽的块状元素，利用margin左右设置auto的方法实现水平居中。

  b.设置display:inline

  通过设置display:inline，使元素变成行内元素，进行不定宽元素的属性设置。

  c.设置position属性为relative，left为50%

  通过给父元素设置float:left，position:reletive,left:50%。给子元素设置position:reletive,left:-50%来实现水平居中的。通过设置父元素的相关属性，使父元素的左边缘与body的中线对齐，再设置子元素的相关属性，使子元素的中线与父元素的左边缘重合，从而完成水平居中设置。

<hr/>

  有时候为了使用户的体验性好，我们需要给元素设置垂直居中。设置垂直居中，分两种情况：

  1）父元素高度确定的单行文本

  通过设置父元素高度height和line-height一致达到垂直居中的目的。其中，line-height指的是文本中行与行之间的基线距离。line-height与font-size之间的差分为两半，分别加入到一个文本内容的顶部和底部。这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

  2）父元素高度确定的多行文本

  对于父元素高度确定的多行文本，有两种方法可以实现垂直居中：

  a.使用插入table(包括tbody、tr、td)标签，同时设置vertical-align:middle

  css中有一个用于竖直居中的属性vertical-align在父元素设置此样式时，会对inline-block类型的子元素都有用。td标签默认情况下就默认设置了vertical-align为middle。

  b.设置块级元素的display属性为table-cell(设置为表格单元显示)，激活vertical-align属性

  此方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容IE6、7，而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

<hr/>

  此外，有一个有趣的现象：当设置元素的float属性为left或right，或者是设置元素的position属性为absolute时，元素自动转换为块级元素(display:inline-block)，不论之前是什么元素。此时就可以设置元素的宽度和高度了。