CSS图片垂直居中方法整理集合_ Div+Css教程-查字典教程网

CSS图片垂直居中方法整理集合

摘要：看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！/*lesliezmz整理的方法2010-01-19*/当writ...

看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
原帖链接：IE6下用writing-mode实现未知高度替换元素垂直居中。

<!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> <style type="text/css">  .miao {   width:500px;   height:220px;   line-height:220px;   border:  1px solid;   text-align: center; } .miao img {   vertical-align: middle;  } </style>  </head> <body>  <h1>固定高宽的容器中，图片垂直局中。</h1> <p>使用的绝对定位和相对定位的方法</p>  <div class="miao"> 	<span><img  src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo"  /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr />  <div class="miao"> 	<span><img  src="http://bbs.blueidea.com/images/default/logo.gif" alt="Logo"  /></span>你知道的太多了你知道的太多了你知道的太多了 </div> <hr />  <div class="miao"> 	<span><img  src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google"  /></span>你知道的太多了 </div> </body> </html>

提示：您可以先修改部分代码再运行

【CSS图片垂直居中方法整理集合】相关文章：

★ DIV+CSS页面布局中BUG解决方法

★ CSS实现圆柱型数据报表的方法

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

★ IE6下图片下方有空间距的多种解决方法

★ 使用CSS代码的空格实现中文对齐的方法

★ CSS的nth-child使用方法

★ 10个CSS简写/优化技巧整理

★ css中水平垂直居中对齐布局实例总结

★ chrome居中但ie不居中的解决方法

★ CSS常用样式效果

上一篇： css3教程：弹性盒模型

下一篇：使用css的类名交集复合选择器让选择元素变简单

学习工具