css未知の画像の幅は容器の中で垂直に中央にあります
9374 ワード
未知の画像の幅が容器の中で垂直に中央にある
自分でまとめた方法:
1:比較的簡単な方法で、互換性の問題はありません:display-inblock+vertical-alignプロパティ:この要素を親要素の中部+span空のラベルに配置します.
二:display:table;css hack ;容器を表ユニット+絶対位置決めとする
三:css式
その他の参考:
http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
http://bbs.blueidea.com/thread-2666987-1-1.html
http://www.w3cplus.com/css%2520/img-vertically-center-content-with-css
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
自分でまとめた方法:
1:比較的簡単な方法で、互換性の問題はありません:display-inblock+vertical-alignプロパティ:この要素を親要素の中部+span空のラベルに配置します.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> </title>
6 <style>
7 .box{
8 width:800px;
9 height:600px;
10 border:2px solid #000;
11 text-align:center;
12 }
13 span{
14 display:inline-block;
15 height:100%;
16 vertical-align:middle;
17 }
18 img{
19 vertical-align:middle;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="box">
25 <img src="bigptr.jpg" /><span></span>
26 </div>
27 </body>
28 </html>二:display:table;css hack ;容器を表ユニット+絶対位置決めとする
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 <title> </title>
6 <style>
7 .box{
8 width:800px;
9 height:600px;
10 border:2px solid #000;
11 display:table;
12 position:relative;
13 overflow:hidden;
14 }
15 span{
16 display:table-cell;
17 text-align:center;
18 vertical-align:middle;
19 *position:absolute;
20 left:50%;
21 top:50%;
22 }
23 img{
24 *position:relative;
25 vertical-align:top;
26 left:-50%;
27 top:-50%;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="box">
33 <span><img src="bigptr.jpg" /></span>
34 </div>
35 </body>
36 </html>三:css式
1 <html lang="en">
2 <head>
3 <meta charset="utf-8" />
4 <meta content="IE=8" http-equiv="X-UA-Compatible"/>
5 <title>CSS </title>
6 <style type="text/css">
7 .box{
8 /*IE8 */
9 display: table-cell;
10 vertical-align:middle;
11 width:500px;
12 height:500px;
13 background:#B9D6FF;
14 border: 1px solid #CCC;
15 }
16 .box img{
17 display:block;
18 margin:0 auto;
19 text-align:center;
20 margin-top:expression((500 - this.height )/2);/* IE567 */
21 }
22 </style>
23 </head>
24 <body>
25 <h1> （CSS ）</h1>
26 <div class="box">
27 <img src="img src="bigptr.jpg" />28 </div>
29 </body>
30 </html> その他の参考:
http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
http://bbs.blueidea.com/thread-2666987-1-1.html
http://www.w3cplus.com/css%2520/img-vertically-center-content-with-css
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/