61,112
社区成员
发帖
与我相关
我的任务
分享怎样让图片绝对居中
就是在css中定样式，文字可以在div中定height和line-height就可垂直居中，定text-align:center;就可水平居中，但图片不可以，怎让图片绝对居中，在不定padding；margin的情况下
...全文
请发表友善的回复…
发表回复
malan_wpf 2009-04-20
- 打赏
- 举报
这里有段代码，是从网上收集到的，很好用！
.ver-center { background: #292928; text-align: center; display: table-cell; vertical-align: middle; height: 400px; width:400px;}
.edge {width: 0; height: 100%; display: inline-block; vertical-align: middle;}
.container {text-align: center; width: 100%; display: inline-block; vertical-align: middle;}
<div class="ver-center">
<span class="edge"></span>
<span class="container"> <img src="http://www.css88.com/attachments/month_0805/b2008526221238.jpg" alt="" /> </span>
</div>
bing475879749 2009-04-19
- 打赏
- 举报
标准浏览器严格型申明下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
}
div p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
bing475879749 2009-04-19
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;text-align:center;border:1px solid #f00;line-height:500px;
height:500px;font-size:500px
}
*>div{
font-size:12px
}
div img {
vertical-align:middle
}
</style>
<div>
<img src="http://www.google.com/intl/en/images/logo.gif" />
</div>
背景居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
* {margin:0;padding:0;}
div {
width:500px;border:1px solid #f00;
height:500px;
background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat
}
</style>
<div>
</div>
linuxlsx 2009-04-19
- 打赏
- 举报
css 不是很了解 可不可以把图片放入一个div中 然后让div居中呢
蓝海D鱼 2009-04-19
- 打赏
- 举报
关注
