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

解决问题——让图片水平垂直居中

解决水平居中是相当的容易,如果图片左浮动并且"display:inline"时,我们只要给图片设置一个"text-align:center"属性,就顺利解决了水平居中。

对于垂直居中的最佳解决方案,在现代浏览器中,我们可以给图片容器设置“dipslay:table-cell;vertical-align:middle”, 这种方法能顺利的让图片实现垂直居中,但只能在现代浏览器运行,在IE6-7中无法正常运。这样一来是不是将无法实现呢?大家别急,我们一起来看下面的几种方法:

1、table-cell加上display:inline

这种方法很神奇,前面我们说过用display-table和vertical-middle是在现代浏览器中实现图片垂直居中是最佳办法,只是IE6-7不支持display:table-cell,其实并不是那么严重,我们只要在IE6-7下给他来个另外的写法。其实掌握了原理在IE下实现起来也并不难,下面我们一起先来看看这个思路:

  1. 首先在图片的容器元素中设置“display:table-cell;vertical-align:middle;”实现现浏览器的垂直居中;
  2. IE6-7有一个好的办法,就是创建一个线盒,此线盒的高度和图片容器的高度一样,并且给这个线盒也设置“vertical-align:middle”。

接下来的关键是给IE6-7创建线盒,还好IE6-7下部分显示支持“dipslay:inline-block”。这样我们就可以在图片的容器中创建一个空元素(比如说span),并且设置span的“display:inline-block;height:100%;vertical-align:middle”。

创建线盒中有一个细节需要注意,在IE6-7中空的line-block元素宽度为“0”,这样在IE6-7下是没有效果的,此时我们需要给span加上“width:1px”,此时会给水平居中造成1px的误差,但这种bug你是可以接受得了的。

那么最终解决方案就是使用display:table-cell和设置了display:inline-block的线合span。当然其中还是需要为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>
<style type="text/css">
.imgWrap li {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
border-collapse: collapse;
}
.imgWrap a {
background: #ffa url(images/gridBg.gif) repeat center;
width: 219px;
height: 219px;
display: table-cell;/*图片容器以表格的单元格形式显示*/
text-align: center; /* 实现水平居中 */
vertical-align: middle; /*实现垂直居中*/
}
.imgWrap a:hover {
background-color: #dfd;
}
.imgWrap img {
border: solid 1px #66f;
vertical-align: middle; /*图片垂直居中*/
}
</style>
<!--下面是解决IE6-7的正常显示的代码-->
<!--[if lt IE 8]>
<style type="text/css">
.imgWrap a {
display: block;
}
.imgWrap span {
display: inline-block;
vertical-align: middle;
height: 100%;
}
.imgWrap {
_height:;
zoom:;
}
</style>
<![endif]-->

CSS代码

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

将span行内元素设置为行内块元素,也就是将其display设置为“inline-block”,将其宽度定位1px,height为容器的100%,这样高度可以和容器的高度达到一样,然后通过“vertical-align:middle”设置垂直对齐,从而实现所需要的效果。本人感觉这个方法优于上面那个方法,最主要的不要单独给IE写效果,而且易懂

<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>
<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>

3、display:table模拟表格实现图片垂直居中

接下来要说的这种方法是结构有点复杂,而且在IE6-7事要配合hack来产现。这个方法就是模拟表格的形式来实现图片垂直居中的效果。

表格大家都知道,他有行(table-row)单元格(table-cell),众所周知,表格单元格中“vertical-align: middle”能让元素垂直居中,那么下面这个实例就是利用这种原理来制作的,一起来看代码

<ul class="imgWrap clearfix">
<li>
<div class="table">
<div class="tableCell">
<a href="#" class="imgBox"><img src="data:images/img1.jpg" alt="" /></a>
</div>
</div>
</li>
<li>
<div class="table">
<div class="tableCell">
<a href="#" class="imgBox"><img src="data:images/img2.jpg" alt="" /></a>
</div>
</div>
</li>
<li>
<div class="table">
<div class="tableCell">
<a href="#" class="imgBox"><img src="data:images/img3.jpg" alt="" /></a>
</div>
</div>
</li>
<li>
<div class="table">
<div class="tableCell">
<a href="#" class="imgBox"><img src="data:images/img4.jpg" alt="" /></a>
</div>
</div>
</li>
</ul>
.imgWrap li {
background: #ffa url(images/gridBg.gif) repeat center;
width: 219px;
height: 219px;
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
text-align: center;
}
.table {
width: 100%;
height: 100%;
display: table;
position: relative;
} .tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 10px;
*position: absolute;
*top: 50%;
*left: 50%;
}
.imgWrap a {
display: block;
*position:relative;
*top: -50%;
*left: -50%;
}

CSS

4、jQuery方法实现图片居中

这个方法很简单,就是得用jQuery方法,将图片转换为其父元素的背景图片,并且在其父元素中居中显示背景图片,然后在将其自身的透明度设置为“0”, 这样也能达到图片居中的效果。

Html Markup

            <ul class="imgWrap clearfix">
<li><a href="#" class="imgBox"><img src="data:images/img1.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><img src="data:images/img2.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><img src="data:images/img3.jpg" alt="" /></a></li>
<li><a href="#" class="imgBox"><img src="data:images/img4.jpg" alt="" /></a></li>
</ul>

CSS Code

            .imgWrap li {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
background: #ffa url(images/gridBg.gif) repeat center;
}
.imgWrap a {
width: 219px;
height: 219px;
display: block;
}

jQuery Code

            //先写一个小插件
$.fn.imgVAlign=function(){
return $(this).each(function(i){
//获取图片的src值,并定义给变量bg
var bg = $(this).attr("src");
//给图片的父元素定义背景图片的样式,并且背景图片
$(this).parent().css({"background": "url("+ bg +") no-repeat center center"
});
//将图片隐藏
$(this).css("opacity","0");
});
}
//调用上面写的插件
$(document).ready(function(){
$(".imgBox img").imgVAlign();
});

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

  1. CSS制作图片水平垂直居中 亲测推荐

    空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...

  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. NET Office 组件Spire

    高效而稳定的企业级.NET Office 组件Spire   在项目开发中,尤其是企业的业务系统中,对文档的操作是非常多的,有时几乎给人一种错觉的是"这个系统似乎就是专门操作文档的" ...

  2. REST风格的原则

    一个好的RESTful API,应该具备以下特征: 这个API应该是对浏览器友好的,能够很好地融入Web,而不是与Web格格不入. 浏览器是最常见和最通用的REST客户端.好的RESTful API应 ...

  3. iOS开发工具(上班需要必备的软件)

    1 源代码管理工具 SVN:SVN可以使用的客户端软件有Cornerstone,SmartSVN,svnX,乌龟SVN,莲花版svn等等 或者git(sourcetree) 2 有道词典 3 Foxm ...

  4. Silverlight button 图片切换样式

    之前一直做WPF现在开始接触Slilverlight感触很多. 今天做一个Button要求 有两个图片,button默认有一个图片,鼠标over时用另一个图片, 用wpf做的时候写一个template ...

  5. HoloLens开发手记 - Unity之Gestures手势识别

    手势识别是HoloLens交互的重要输入方法之一.HoloLens提供了底层API和高层API,可以满足不同的手势定制需求.底层API能够获取手的位置和速度信息,高层API则借助手势识别器来识别预设的 ...

  6. 我从腾讯那“偷了”3000万QQ用户数据,出了份很有趣的独家报告!

    声明: 1.目前程序已停止运行!QQ空间也已升级访问安全机制. 2.本“分析”数据源自部分用户的公开信息,并未触及隐私内容,广大网友无需担心. 3.QQ空间会不定期发布大数据分析报告,感兴趣的朋友关注 ...

  7. 【niubi-job——一个分布式的任务调度框架】----安装教程

    niubi-job是什么 niubi-job是LZ耗时三个星期,费尽心血打造的一个具备高可靠性以及水平扩展能力的分布式任务调度框架,采用quartz作为底层的任务调度管理器,zookeeper做集群的 ...

  8. Koala Framework是什么?我为什么要写这个框架?

    当时的监管组,技术力量累积的很少,还在直连DB,使用着DataTable.DataSet作为数据的承载,监管是公司最近几年主推的项目,所以领导们决定进行重要调整. 初来乍到 由于之前没有任何的技术积累 ...

  9. [USACO2004][poj1985]Cow Marathon(2次bfs求树的直径)

    http://poj.org/problem?id=1985 题意:就是给你一颗树,求树的直径(即问哪两点之间的距离最长) 分析: 1.树形dp:只要考虑根节点和子节点的关系就可以了 2.两次bfs: ...

  10. iOS---cell-自适应高度

    RootViewController: // // RootViewController.m // UI__cell自适应高度 // // Created by dllo on 16/3/15. // ...