最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS未知高度元素垂直居中问题解决方法
时间：2014-07-17 编辑：简简单单 来源：一聚教程网
首先我们来看这样一段HTML：
| 代码如下 | 复制代码 |
|
|
|
类似这样的结构，是我们在实际应用中常遇到的，其中，li的宽和高都是固定的，但图片的宽和高可能是不确定的，例如商城的商品列表。
此时，如果希望图片水平居中，只需要给li应用text-align: center;即可，但如果需要图片垂直居中就不那么容易了。
网上有许多方法可以实现不固定高度元素垂直居中，例如：背景法、添加标签法，但这类破坏HTML结构的方法都是我不想要的，最后采用了淘宝的方法。
| 代码如下 | 复制代码 |
|
li a { 关键代码为： li a { |
|
我不是很情愿使用hack，但实在没办法，使用hack总比在HTML中添加额外元素要好得多，所以个人觉得这是目前我所知的最好的解决方法。
这里需要注意font-size的值，是根据li的高度除以1.14得来的，具体为什么淘宝工程师也不知道。
另外，如果图片的高度的是固定的，那么可以使用绝对定位加负外边距实现。
补充:
| 代码如下 | 复制代码 |
|
CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*针对IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*针对IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { font-family:"宋体"; border:1px green solid;/*针对IE的hack*/ *position:relative; *top:-50%; margin:0 auto; width:200px; } HTML 我是居中的文字 我居中 你也居中  |
|
有上面1和2我们看到对多数浏览器text-align:center;只对img（默认inline-block）生效，而margin:auto只对div（默认block）生效，那这次我们试着将img设置为block，将div设置为inline-block再进行测试看看。
代码如下
| 代码如下 | 复制代码 |
兼容性如下：
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
由上面的结果可以看出，text-align:center;和margin:auto主要是看元素的display属性。
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26