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的中线对齐，再设置子元素的相关属性，使子元素的中线与父元素的左边缘重合，从而完成水平居中设置。

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

 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，破坏了原有的块状元素的性质。

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。