CSS未知高度元素垂直居中解决方法
文 / @UTHEME
通常产品列表,我们希望产品图片是在一个盒子内垂直居中,如果图片尺寸未知,且希望保持原来的宽高比例,就涉及到未知高度元素垂直居中的问题。
如果不用考虑IE6/7,问题会非常简单,display: table-cell 可以将元素以表格单元格的形式呈现,那么垂直居中就不是问题了,现在我们的情况是要考虑IE6/7,display: table-cell 在IE6/7下行不通。
首先我们来看这样一段HTML:
<ul> <li><a href=""><img src="" alt="" /></a></li> </ul>
其中,li的宽和高都是固定的,但图片的宽和高可能是不确定的,此时,如果希望图片水平居中,只需要给li应用 text-align: center 即可,但如果需要图片垂直居中就不那么容易了。
网上有许多方法可以实现不固定高度元素垂直居中,例如:背景法、添加标签法,但这类破坏HTML结构的方法都是我不想要的,最后采用了淘宝的方法。
li a { width: 160px; height: 160px; padding: 2px; background-color: #fafafa; border: 1px solid #ececec; margin: 0 auto; display: table-cell; *display: inline-block; *font-size: 140px; *font-family: Arial; vertical-align: middle; } li img { vertical-align: middle; }
关键代码为:
li a { display: table-cell; *display: inline-block; *font-size: 140px; *font-family: Arial; vertical-align: middle; } li img { vertical-align: middle; }
我不是很情愿使用Hack,但实在没办法,使用Hack总比在HTML中添加额外元素要好得多,所以个人觉得这是目前我所知的最好的解决方法。
这里需要注意font-size的值,是根据li的高度除以1.14得来的,具体为什么淘宝工程师也不知道。
另外,如果图片的高度的是固定的,那么可以使用绝对定位加负外边距实现。

相关文章
-
WordPress插件:All in One WP Security & Firewall 怎么样(附:AIOWPS拦截垃圾评论设置教程) 2023-01-26 21:51:51
-
在 PHP 中如何通过一行代码就交换两个变量的值 2023-01-26 00:18:31
-
WordPress主题:Pin Premium (WordPress仿Pinterest样式瀑布流主题) 2023-01-25 23:36:43
-
免费WordPress主题:Maupassant(WordPress中文博客主题) 2023-01-25 23:31:29
-
WordPress响应式图片(Responsive Image)功能关闭:取消WordPress图片宽带和高度参数 2023-01-24 10:49:32
-
wordpress报错:修复MySQL 1064错误问题 错误原因和解决方法 2023-01-24 10:42:04
-
WordPress 实现静态化搜索结果页面的方法 2023-01-24 00:41:44
-
WP Rocket – 强大的WordPress缓存加速优化插件(附:WP Rocket插件设置过程与七折优惠码) 2023-01-24 00:41:44
-
get_permalink、get_the_permalink和the_permalink有啥区别? 2023-01-24 00:41:08
-
为什么选用WordPress搭建独立站? 2023-01-23 20:25:21