深入理解盒子 |
您所在的位置:网站首页 › 垂直水平居中的几种方法是什么 › 深入理解盒子 |
文本垂直居中方法比较常用,比如一定高度的盒子中,未知高度的盒子等常用于总结下文本垂直居中的以下方法: 1.单行文本垂直居中: 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如: div{ height:25px; line-height:25px; }2.(未知高度)多行文本垂直居中设置上下的padding值一样即可,如: div{ padding:25px; }3、多行文本固定高度的居中(模拟table方法) css中垂直居中样式vertical-align:middle属性,但是此属性只对标签、、,和内联元素display设置为inline/inline-block起作用,其他的则不起作用 (1)InternetExplorer6及以下的版本中是无效的vertical-align:middle对表格起作用(可以用下面第4种方法),那么可以用div来模拟成为table,让vertical-align:middle属性起作用。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个 元素: div#wrap{ height:400px; display:table; } div#content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; } 代码如下: 现在我们要使这段文字垂直居中显示!Webjx.Com5.使用用定位的方式position,让其距离顶部高度为50%,然后设置margin-top:-(盒子高度/2)px即可 代码如下: div#wrap{ position:relative; overflow:hidden; } div#content{ position:absolute; top:50%; height:400px; margin-top: -200px; } CSS行高(line-height)及文本垂直居中原理在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: Document div { width: 300px; height: 200px; border: 1px solid red; } span { line-height: 200px; } 文本垂直居中原理 这样,span标签中的文字就相对于div垂直方向居中了,想要文本水平居中设置text-align:center即可。 行框 在浏览器中,会将给每一段文本生成一个行框,行框的高度就是行高。行框由上间距、文本高度、下间距组成,上间距的距离与下间距的距离是相等的。 文本中的几条线 文本的行高也可以看成是基线到基线的距离。 Chrome浏览器的默认值 谷歌浏览器字体的默认大小是:16px,字体的最小值为:12px,默认行高为:18px;默认情况下如果没有给div设置高度,那么这个div的高度会比其中文本的大小大一点(这个大多少现在没有办法确定) 行高的单位 px(像素) 设置起来是最直接的,同时也最方便的。 %(百分号) 如果line-height单位设置为%,那么将来在计算的时候,基数是当前标签中的文本的字体的大小。 如果是%,%之前的数据一定是整数 :150% ,200% em 效果跟%是一样一样的。 注意:一行em的大小相当于是当前标签中的font-size的大小。 如果是em,em之前的数据一定是:1.2em ,1.5em ,2em 不带单位 如果不涉及到继承,那么带不带单位(em)都是一样的效果,但是如果涉及到继承的话,那么就有很大的区别了: 如果单位是em,那么将来在继承的时候,我们的浏览器会先将行高对应的具体的数值计算出来以后再继承。 如果没有单位,那么将来在继承的时候,我们的浏览器会先将line-height这个属性继承给子元素,再在子元素的font-size来计算。line-height: 1.5; 行高可以被继承 我们知道,CSS的三大特性是继承、层叠、优先级。line-height也是可以被继承的,如下面的示例: Document span { display: inline-block; } 中国人 在不给div设置行高的情况下,span标签的文字行高默认为18 我们再来看看span标签的的变化 行高计算的基数 如果行高的单位不是px,那么将来行高要进行计算:这个计算需要一个基数,这个基数是当前标签的字体大小,而不是浏览器默认字体大小。以上面的例子为例,我们并没有设置任何字体大小,此时我们把line-height设置为150%,那么文字的行高将变为24px(16px*1.5=24)。 div { line-height: 150%; } 效果如下 那么文字的行高将会变成30px,20px*1.5=30px; 1.利用display:table-cell,具体代码如下: html代码如下: css代码如下: .img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; display: table-cell; //主要是这个属性 vertical-align: middle; text-align: center; } 效果如下: 2.采用背景法: html代码如下: css代码如下: .img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; background: url(wgs.jpg) no-repeat center center; } 效果如下图: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |