首页 > 代码库 > CSS制作图片水平垂直居中 亲测推荐
CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中
这种方法很有意思，也很有独特之处，我的思路也是来自于张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文中的使用空白图片实现垂直对齐。他主要使用了一张宽度为1px高度为100％的透明图片，并设置图片“vertical-align:middle”。后来我想了想，此处能不能不使用图片，直接像上面的实例一样，用一个空格的span标签，只是将其“display:inline”设置为“display:inline-block”。因为这两者的核心原理都是一致的：我将span行内元素设置为行内块元素，也就是将其display设置为“inline-block”，将其宽度定位1px，height为容器的100%，这样高度可以和容器的高度达到一样，然后通过“vertical-align:middle”设置垂直对齐，从而实现所需要的效果。因为张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文中的使用空白图片实现垂直对齐成功实现效果，于是我也按自己的思路动手一试，效果和他的一模一样，而且兼容各浏览器，代码较第一种方法又简单很多，最主要的不要单独给IE写效果，而且易懂，下面一起看看这种方法吧。
HTML Markup
<ul class="imgWrap clearfix"> <li><a href="http://www.mamicode.com/#" class="imgBox"><span></span><img src="http://www.mamicode.com/images/img1.jpg" /></a></li> <li><a href="http://www.mamicode.com/#" class="imgBox"><span></span><img src="http://www.mamicode.com/images/img2.jpg" /></a></li> <li><a href="http://www.mamicode.com/#" class="imgBox"><span></span><img src="http://www.mamicode.com/images/img3.jpg" /></a></li> <li><a href="http://www.mamicode.com/#" class="imgBox"><span></span><img src="http://www.mamicode.com/images/img4.jpg" /></a></li> </ul>
CSS Code
<style type="text/css"> .imgWrap li{ width: 219px; height: 219px; float: left; border: solid 1px #666; margin: 10px 10px 0 0; list-style: none; text-align: center; font-size: 0; } .imgWrap a { display: block; height: 100%; background: #ffa url(images/gridBg.gif) repeat center; } .imgWrap a:hover { background-color: green; } .imgWrap span { display: inline-block;/*将行内元素改变为行内块元素显示*/ width: 1px;/*实现ＩＥ下可读效果*/ height: 100%;/*使用元素高度和图片容器高度一样*/ vertical-align: middle;/*垂直对齐*/ } .imgWrap img { vertical-align: middle; } </style>
效果
原文链接：http://www.w3cplus.com/css%2520/img-vertically-center-content-with-css
CSS制作图片水平垂直居中 亲测推荐
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。