如何讓圖片利用CSS垂直置中   Leave a comment

之前的美工所遇到的問題,他苦惱了很久,後來她自行在網路上找到相關文章,感覺是很常會遇到的問題,特此收錄在此

http://www.phontol.com/20080727_257372.html

 

文章內容備份:

 

完美的水平垂直居中!!–兼容ie6,ie7,ff,opera,safari的水平垂直居中
点击下面的运行,可预览代码效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>完美的水平垂直居中!!–兼容ie6,ie7,ff,opera,safari的水平垂直居中</title> <style media="screen" type="text/css"> .wrapper{ width:700px; height:400px; background:#ccc; border:1px #000 solid;} .holder{width:500px; height:200px; display:table; position:relative; margin:12px auto; border:1px solid #596480; background:#ffc;} .holder div{*position:absolute; top:50%; left:0; display:table-cell; vertical-align:middle; width:100%;} .holder p{position: relative; top:-50%; text-align:center; margin:0; padding:0;} /* 分两套看 holder的 display:table holder div的 display:table-cell; vertical-align:middle; 就可以实现在ff,safari和opera下的垂直居中,但是对ie系列无效 holder的 position:relative; holder div的 *position:absolute; top:50%; left:0; .holder p的 position: relative; top:-50%; 通过控制绝对层的位置实现ie6,7下的垂直居中 holder div中的*position:absolute是只给ie6和7看的css hack 对于水平居中要说的是如果holder div的width如果未指明100%,在ie7中它是不会自动延伸100%的,也就无法实现水平居中 */ </style> </head> <body> <div class="wrapper"> <div class="holder"> <div><p><img src="http://webdesign.bitscn.com/UploadFiles_8014/200803/20080311145849892.gif&quot; /></p></div> </div> <div style="line-height:40px; background:#006633; font-size:14px; color:#FFFFFF; font-weight:bold; text-align:center;"> 以上的图片垂直并且水平居中,您可以改变holder的height和width进行测试</div> </div> </body> </html>

廣告

Posted 2008 年 10 月 31 日 by sfcer0414 in KB

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

%d 位部落客按了讚: