首页 > 开发 > CSS > 正文

大小不固定的图片和多行文字的垂直水平居中实现分析

2024-07-11 08:34:09
字体:
来源:转载
供稿:网友

一、大小不固定,多行文字的垂直居中

① 单行文字

可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如: 单行文字居中显示测试,css样式为:

height:3em; line-height:3em;……

② 多行文字

但是对于外框高度固定,文字大小个数不固定的多行文字呢?
文字可能一行显示,也有可能多行显示;文字可能是小号字体,也有可能是大号的。这时候如何让其垂直居中显示呢?看下面! 这里的文字用来做多行文字垂直居中对齐的测试。
这是第二行文字,您还可以再添加一行文字做测试!
这是隐藏的第三行文字,注意到文字的变化没,依旧垂直居中。

上面所展示的就是多行文字垂直居中的效果!

HTML结构如下:

复制代码代码如下:
<div class=”zxx_align_box_2″><span class=”zxx_align_word”>这里显示多行文字。</span></div>

css代码如下:

复制代码代码如下:
.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}
.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}

实现的原理:

说白了,就是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。

有几点简要说明:1.此例子用em做单位,如果您对em单位了解不够,把握不来的话,可以使用px做单位,值要换;2.外部div不能使用浮动;3.外部div高度和文字大小比例1.14为宜;4.内部标签的vertical-align:middle可以省略,但是外部div高度和文字大小比例要修改,我自己试了一下,高度比字体1.5左右的样子;5.系统原因,我没能够在IE8下测试。

对于一些细化的原理,将在图片垂直居中处讲一下。
二、大小不固定,图片的垂直居中

① 透明gif图片+背景定位

这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法,对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。 方法的原理很简单,使用一个透明的gif图片做覆盖层,高宽拉伸至所需要的大小,然后给这个gif图片一个background-position:center center的属性。而background-image建议写在页面上,因为实际项目中,这肯定是个动态的URL地址,css文件似乎不支持动态URL地址。下面就是此方法的实例表现。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表