本篇文章给大家带来的内容是关于CSS如何实现未知高度图像的垂直居中(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
nbsp;html> <meta> <meta> <title> CSS垂直居中</title> <style> .container{ width:500px;/*装饰*/ height:500px; background:#B9D6FF; border: 1px solid #CCC; } </style> <h1>垂直居中(table)</h1> <div> <table> <tr> <td> <img alt="CSS如何實現未知高度圖像的垂直居中(附程式碼)" > </td> </tr> </table> </div>
好了,我们看其CSS实现。凡是table能做到的,CSS都能做的,但各浏览器在CSS的差异比较大,因此要兼容它们难度很大。这涉及许多细节,各种流啊,display的表现效果与CSS hack,IE早些年搞了大堆的私有属性,这也有待我们深一步挖掘。我们先看最简单的实现,背景图片法
背景图片法
nbsp;html> <title> CSS垂直居中</title> <style> .container { width:500px; height:500px; line-height:500px; background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg) no-repeat center center; border:1px solid #f00; text-align: center; } </style> <h1>垂直居中</h1> <div> </div>
CSS表达式法
<meta> <meta> <title>司徒正美 CSS垂直居中</title> <style> .container{ /*IE8与标准游览器垂直对齐*/ display: table-cell; vertical-align:middle; width:500px;/*装饰*/ height:500px; background:#B9D6FF; border: 1px solid #CCC; } .container img{ display:block;/*让其具备盒子模型*/ margin:0 auto; text-align:center; margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */ } </style> <h1>垂直居中(CSS表达式)</h1> <div> <img alt="CSS如何實現未知高度圖像的垂直居中(附程式碼)" > </div>
绝对定位法
nbsp;html> <meta> <meta> <title>司徒正美 CSS垂直居中</title> <style> div { /*IE8与标准游览器垂直对齐*/ display:table-cell; vertical-align:middle; overflow:hidden; position:relative; text-align:center; width:500px;/*装饰*/ height:500px; border:1px solid #ccc; background:#B9D6FF; } div p { +position:absolute; top:50% } img { +position:relative; top:-50%; left:-50%; } </style> <h1>垂直居中(绝对定位)</h1> <div> <p> <img alt="CSS如何實現未知高度圖像的垂直居中(附程式碼)" > </p> </div>
display:inline-block法
nbsp;html> <meta> <meta> <title>司徒正美 CSS垂直居中</title> <style> div { display:table-cell; vertical-align:middle; text-align:center; width:500px; height:500px; background:#B9D6FF; border: 1px solid #CCC; } </style> <!--[if IE]> <style type="text/css"> i { display:inline-block; height:100%; vertical-align:middle } img { vertical-align:middle } </style> <![endif]--> <h1>垂直居中(inline-block法)</h1> <div> <i></i> <img alt="CSS如何實現未知高度圖像的垂直居中(附程式碼)" > </div>
writing-mode法
nbsp;html> <meta> <meta> <title> CSS垂直居中</title> <style> div{ width:500px; height:500px; line-height:500px; text-align:center; background:#B9D6FF; border:1px solid #f00; } div span{ height:100%\9; writing-mode:tb-rl\9; } div img{ vertical-align:middle } </style> <h1>垂直居中(writing-mode法)</h1> <div> <span> <img alt="CSS如何實現未知高度圖像的垂直居中(附程式碼)" > </span> </div>
以上是CSS如何實現未知高度圖像的垂直居中(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!