,在css的使用中,有很多小技巧,今天就谈一谈css使用中的文本设置。
,在很多时候,我们都会用到文本的水平居中设置,例如文章的标题,为了显得好看,我们一般设置的就是水平居中。不同的html元素设置水平居中的方法不同。
,1 .行内元素
,对于行内元素,设置水平居中,如果被设置元素为文,本图片等元素,只需要在父元素中设置text-align:中心即可。
,2 .块状元素
,对于块状元素,text-align:中心是不起作用的,那么我们该如何设置呢,这里分两种情况:
,1)定宽的块状元素
,设置左右边缘(外边距)值为汽车,例如:保证金:10 px汽车。当然前提是元素的宽度是确定的,即宽度有确定的值,例如:宽度:200 px。
,2)不定宽的块状元素
,对于不定宽的块状元素,设置水平居中的方式有三种:
,一。加入表标签
,为什么要加入表标签呢,原来表标签有一个特性- - - - - -自适应长度,不定义其长度也不默认身体的长度(表的长度是根据其内容的长度来定的)。可以看作一个定宽的块状元素,利用保证金左右设置汽车的方法实现水平居中。
,b。设置显示:内联
,通过设置显示:内联,使元素变成行内元素,进行不定宽元素的属性设置。
,c。设置位置属性为相对的,左为
50%,通过给父元素设置浮动:左,位置:reletive,左:50%。给子元素设置位置:reletive,左:-50%来实现水平居中的。通过设置父元素的相关属性,使父元素的左边缘与身体的中线对齐,再设置子元素的相关属性,使子元素的中线与父元素的左边缘重合,从而完成水平居中设置。
& lt;人力资源/祝辞
,有时候为了使用户的体验性好,我们需要给元素设置垂直居中。设置垂直居中,分两种情况:
,1)父元素高度确定的单行文本
,通过设置父元素高度高和行高一致达到垂直居中的目的。其中,行高指的是文本中行与行之间的基线距离.line-height与字体大小之间的差分为两半,分别加入到一个文本内容的顶部和底部。这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。
,2)父元素高度确定的多行文本
,对于父元素高度确定的多行文本,有两种方法可以实现垂直居中:
,a。使用插入表(包括tbody, tr, td)标签,同时设置vertical-align:中间
,css中有一个用于竖直居中的属性vertical-align在父元素设置此样式时,会对inline-block类型的子元素都有用.td标签默认情况下就默认设置了vertical-align为中间。
,b。设置块级元素的显示属性为表格单元(设置为表格单元显示),激活vertical-align属性
,此方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容IE6, 7,而且这样修改显示的块变成了表格单元,破坏了原有的块状元素的性质。
& lt;人力资源/祝辞
,此外,有一个有趣的现象:当设置元素的浮动属性为左或右,或者是设置元素的位置属性为绝对时,元素自动转换为块级元素(显示:inline-block),不论之前是什么元素。此时就可以设置元素的宽度和高度了。
