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图片垂直居中方法整理集合】相关文章：

★ Input标签与图片按钮水平对齐解决方法

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

★ CSS中图片于文本的基线对齐设置

★ CSS基础教程:CSS属性结合起来使用

★ CSS 平级和儿子级样式写法示例

★ CSS常用样式效果

★ CSS BUG顺口溜，快速牢记CSS的Bug处理方法

★ CSS多列布局实现方法大全

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

★ CSS的nth-child使用方法

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

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

学习工具