注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

成功源于细节

梦想、奋斗、收获

 
 
 

日志

 
 
 
 

css任意图片文字上下左右都居中对齐  

2013-01-15 13:47:15|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项目可能会用到这个方案,所以把一些常用的方法都收集整理了一下。

下图是理想中的效果图,外部容器的宽度和高度是固定的,中间的图片宽度和高度未知,但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美,由于各浏览器的解析都各不相同,所以各浏览器都会有1px-3px的偏差。

(XHTML 1.0 transitional)方法

该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title> 多行文字图片实现垂直居中 </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body { font-size:12px;font-family:tahoma;} 
div#wrap { 
display:table; 
border:1px solid #FF0099; 
background-color:#FFCCFF; 
width:760px; 
height:600px; 
_position:relative; 
overflow:hidden; 
div#subwrap { 
vertical-align:middle; 
display:table-cell; 
_position:absolute; 
_top:50%; 
div#content { 
_position:relative; 
_top:-50%; text-align: center;
</style> 
</head> 
<body> 
<div id="wrap"> 
<div id="subwrap"> 
<div id="content"><pre>
<img src="http://i10.topit.me/l161/1016156445697d1441.jpg" alt="" height="300"/><br />
现在我们要使这段文字垂直左右居中显示! 
div#subwrap { position:absolute; border:1px solid #000; top:50%; } 
div#content { border:1px solid #000; position:relative; top:-50%; } 
</pre></div> 
</div> 
</div> 
</body> 
</html> 
  评论这张
 
阅读(2045)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017