)垂直置中及容器內圖片垂直置中的CSS解決方案

來源:互聯網
上載者:User
Div與CSS布局,最讓人頭疼的就是容器內的東西如何垂直置中的問題,我在做站時也遇到,查了一下資料,總結出以下置中辦法,相容IE與及Firefox

HTML代碼<style type="text/css"><br /><!--<br />* {margin:0;padding:0}<br />div {<br />width:500px;<br />height:500px;<br />border:1px solid #666;<br />overflow:hidden;<br />position:relative;<br />display:table-cell;<br />text-align:center;<br />vertical-align:middle<br />}<br />div p {<br />position:static;<br />+position:absolute;<br />top:50%<br />}<br />img {<br />position:static;<br />+position:relative;<br />top:-50%;left:-50%;<br />}<br />--><br /></style><br /><div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div><br />

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

方法二HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>div裡面圖片垂直置中的幾個例子</title><br /><style type="text/css"><br /><!--<br />body {<br />margin:0;padding:0<br />}<br />div {<br />width:500px;<br />height:500px;<br />line-height:500px;<br />border:1px solid #666;<br />overflow:hidden;<br />position:relative;<br />text-align:center;<br />}<br />div p {<br />position:static;<br />+position:absolute;<br />top:50%<br />}<br />img {<br />position:static;<br />+position:relative;<br />top:-50%;left:-50%;<br />vertical-align:middle<br />}<br />p:after {<br />content:".";font-size:1px;<br />visibility:hidden<br />}<br />--><br /></style><br /></head><br /><body><br /><div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div><br /></body><br /></html><br />

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

方法三 HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>div裡面圖片垂直置中的幾個例子</title><br /><style type="text/css"><br /><!--<br />* {margin:0;padding:0}<br />div {<br />width:500px;<br />height:500px;<br />line-height:500px;<br />border:1px solid #666;<br />overflow:hidden;<br />position:relative;<br />text-align:center;<br />}<br />div p {<br />position:static;<br />+position:absolute;<br />top:50%;<br />vertical-align:middle<br />}<br />img {<br />position:static;<br />+position:relative;<br />top:-50%;left:-50%;<br />vertical-align:middle<br />}<br />--><br /></style><br /></head><br /><body><br /><div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div><br /></body><br /></html><br />

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

方法四(針對背景圖片置中) HTML代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>div裡面圖片垂直置中的幾個例子</title><br /><style type="text/css"><br /><!--<br />* {margin:0;padding:0;}<br />div {<br />width:500px;border:1px solid #666;<br />height:500px;<br />background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat<br />}<br />--><br /></style><br /></head><br /><body><br /><div></div><br /></body><br /></html><br />

[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.