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="#" 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制作图片水平垂直居中 亲测推荐的更多相关文章
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS中图片水平垂直居中方法小结
写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
<div class="demo"><a href="#"><img src="http://nec.netease.c ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
随机推荐
- 从 Auto Layout 的布局算法谈性能
这是使用 ASDK 性能调优系列的第二篇文章,前一篇文章中讲到了如何提升 iOS 应用的渲染性能,你可以点击 这里 了解这部分的内容. http://t.cn/Rc4KbUC 在上一篇文章中,我们提到 ...
- HttpClient设置代理,超时,以及得到cookies
import java.net.URI; import java.util.List; import org.apache.http.HttpEntity; import org.apache.htt ...
- E - 最短的名字
Description 在一个奇怪的村子中,很多人的名字都很长,比如aaaaa, bbb and abababab. 名字这么长,叫全名显然起来很不方便.所以村民之间一般只叫名字的前缀.比如叫'aaa ...
- 记录asp.net网站停止运行原因的代码
记录网站是什么原因导致停止运行还是有必要的,下面是具体的实现方式. protected void Application_End(object sender, EventArgs e) { Recor ...
- 用继承实现XYPoint和Circle两个类
#import <Foundation/Foundation.h> @protocol show @required -(void)printOn; @end @interface XYP ...
- jboss部署出现jboss.naming.context.java.rmi找不到错误
最近,在机器人程序中使用jmx,准备做个远程调用,客户端是web,部署在jboss上,本地测试的都好好的,发到预发布上就是不行, 错误描述: Failed to retrieve RMIServer ...
- POJ 3253 Fence Repair (贪心)
Fence Repair Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit ...
- CF Tavas and Karafs (二分)
Tavas and Karafs time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- Netbackup磁带过期处理
bpexpdate -m <mediaid> -d 0 如果不通过,看是否被其他media server写入数据.使用 nbemmcmd -listhost 查看所有media serve ...
- 关于css制作圆角
三个阶段: 1.背景图片: 2.css2.0+标签模拟圆角: 3.css3.0圆角属性(border-radius). 1.1.背景图片--宽度固定,高度自适应圆角 为容器设置宽度 在主体的上方加一个 ...