A-A+

如何让一个元素水平垂直居中

2015年06月19日 htmlcss 暂无评论 阅读 410 次

如何让一个元素水平垂直居中

一.大小不固定的图片、多行文字的水平垂直居中

css:
.sub_1{width:235px;height:100px;display: table;}
.sub_1 span{display:table-cell;font-size:12px;vertical-align:middle;}
html:
<li class="sub_img"><img src="img/qq.png" /></li>
<li class="sub_1"><span>《DETAIL CULTURE细部文化 —倘若建筑蕴含DNA的基因突变案例研究》</span></li>

 

多行文字的水平垂直居中

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

① 单行文字
可能很多人都知道如何让单行文字垂直居中显示,就是使用line-height,将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码:height:3em; line-height:3em; ……
显示结果如下图:

2009-08-27_223115

② 多行文字
如何实现父容器高度固定,文字可能一行,两行或更多行的垂直居中对齐呢?
实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来,设置文字与图片相同的display属性(inline-block属性),然后用处理图片垂直居中的方式处理文字的垂直居中即可。
核心css代码如下,
外部div标签:

div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}

内部span标签:

span{display:inline-block; font-size:0.1em; vertical-align:middle;}

下面这张是实例演示页面的效果截图:

2009-08-27_224624

有几点简要说明:
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 地址。下面就是实例演示页面的效果截图。

 

四:vertaicalmidle要有参照物才能居中,正确写法是给父级的同级加个行标签 然后displayinblock,最好用行标签写,块标签 ie67有兼容;如果用块元素得加上两条hack display:inline-block;*display:inline;*zoom:1;

<div style="height:200px;line-height:200px;border:1px solid orange">
<div style="display:inline-block;vertical-align: middle;line-height:normal">
<span>sdfsdf</span><br/><span>ghjgjh</span><br/><span>5466456</span><br/>
</div>
</div>

 

20151010172720

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录