空白标签实现图片的垂直居中

这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文中的使用空白图片实现垂直对齐。他主要使用了一张宽度为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="#" class="imgBox"><span></span><img src="data:images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="data:images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="data:images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><span></span><img src="data:images/img4.jpg" alt="" /></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:;
} .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;/*实现IE下可读效果*/
height: 100%;/*使用元素高度和图片容器高度一样*/
vertical-align: middle;/*垂直对齐*/
} .imgWrap img {
vertical-align: middle;
}
</style>

效果

原文链接:http://www.w3cplus.com/css%2520/img-vertically-center-content-with-css

CSS制作图片水平垂直居中 亲测推荐的更多相关文章

  1. CSS制作图片水平垂直居中

    所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...

  2. css实现图片水平垂直居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS中图片水平垂直居中方法小结

    写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...

  4. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  5. 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

  6. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  7. 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  9. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

随机推荐

  1. oracle_partition sample_simple

    一:范围分区 就是根据数据库表中某一字段的值的范围来划分分区,例如: create table graderecord ( sno varchar2(10), sname varchar2(20), ...

  2. 实验-hadoop开发环境部署

    hadoop-0.20.2自带了eclipse插件,比如1.0.0和2.2.0就没有 1.windows下 1)把插件hadoop-0.20.2-eclipse-plugin.jar复制到eclips ...

  3. MYSQL基础笔记(六)- 数据类型一

    数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...

  4. poj 2728 最优比率生成树

    思路:设sum(cost[i])/sum(dis[i])=r;那么要使r最小,也就是minsum(cost[i]-r*dis[i]);那么就以cost[i]-r*dis[i]为边权重新建边.当求和使得 ...

  5. ubuntu不能正常使用make menuconfig的解决方案

    so easy sudo apt-get install build-essentialsudo apt-get install libncurses5sudo apt-get install lib ...

  6. Oracle分页查询语句的写法(转)

    Oracle分页查询语句的写法(转)   分页查询是我们在使用数据库系统时经常要使用到的,下文对Oracle数据库系统中的分页查询语句作了详细的介绍,供您参考. Oracle分页查询语句使我们最常用的 ...

  7. saltstack实战3--配置管理之pillar

    数据系统-Pillar pillar和grains类似,但是它能给minion指定它想要的数据,安全性较好,另外它是在master端设置的   应用场景: grains的特性–每次启动汇报.静态决定了 ...

  8. hihocoder 1038 01背包

    #1038 : 01背包 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励 ...

  9. App推广干货,排名数据分析优化效果

    出处: App盈利交流论坛        2015年3月份,在百度上了一款赛车类游戏(不说什么名字了怕被打包),后台起名叫002,刚开始上的时候一天只有几元钱,但是游戏还是倾注了不少心血的,觉得不甘心 ...

  10. SQL Server 编程入门经典(3)之T-SQL基本语句

    本章内容简介: 如何从数据库检索数据(SELECT) 如何向表中插入数据(INSERT) 如何适当更新数据(UPDATE) 如何删除表中数据(DELETE) 3.1 基本SELECT语句  如果你在此 ...