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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网站名称:CSS使用技巧(一)-创新互联
文章网址:http://pwwzsj.com/article/dedsjh.html