Html 无论窗口大小如何，都将图像放置在具有溢出的中心
在我的站点上定位徽标（Html 无论窗口大小如何，都将图像放置在具有溢出的中心,html,css,positioning,image,Html,Css,Positioning,Image,在我的站点上定位徽标（img）时遇到一些问题。我希望它在任何时间和窗口大小都居中。同时，我希望它在div的底部重叠/溢出 它被放置在divmain中，我想让它越过名为nav的div。我没有遇到任何问题，使它重叠，但它只是不会停留在中心 有什么建议吗 CSS html <body> <div id="nav"> <ul> <li><img src="images/thumb.png" alt="thumb" width=
imgmainnav<body>
<div id="nav">
<ul>
<li><img src="images/thumb.png" alt="thumb" width="100px" /><a href="index.html">COMPETE</a></li>
<li><img src="images/thumb.png" alt="thumb" width="100px" /><a href="index.html">SCORE</a></li>
<li><img src="images/thumb.png" alt="thumb" width="100px" /><a href="index.html">SHOP</a></li>
<li><img src="images/thumb.png" alt="thumb" width="100px" /><a href="index.html">MORE</a></li>
</ul>
</div>
<div class="clear"> </div>
<div id="main">
<div id="logo"> <img src="images/logorz.png" alt="logo" width="180px" /> </div>
<div id="text-left">
<p><strong>Good cause<br />marketplace<br />for limited<br />art-pieces</strong></p>
</div>
<div id="text-right">
<p><strong>... produced by<br />the most<br />creative crowd<br />out there</strong></p>
</div>
<div id="enter"> <a href="index.html">Enter contest</a> </div>
<img src="images/front-img.png" alt="gallery images" width="100%" />
</div>
<div id="donations">
<div class="meter orange nostripes"> <span style="width:31.99%"></span> </div>
<p><strong>$7.678</strong> of <strong>$24,000</strong> donated this month<br />
This month's donations will help streetdogs in<br />
Bulgaria to find new owners!</p>
<div class="wrapper">
<div class="clock">
<!-- Days -->
<div class="clock_days">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_days" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_days">Days</p>
</div>
</div>
</div>
<!-- Days -->
<!-- Hours -->
<div class="clock_hours">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_hours" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_hours">Hours</p>
</div>
</div>
</div>
<!-- Hours -->
<!-- Minutes -->
<div class="clock_minutes">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_minutes" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_minutes">Minutes</p>
</div>
</div>
</div>
<!-- Minutes -->
<!-- Seconds -->
<div class="clock_seconds">
<div class="bgLayer">
<div class="topLayer"></div>
<canvas id="canvas_seconds" width="188" height="188"> </canvas>
<div class="text">
<p class="val">0</p>
<p class="type_seconds">Seconds</p>
</div>
</div>
</div>
<!-- Seconds -->
</div>
<a href="index.html">More info</a>
</div>
</div>
<div id="gallery">
<div id="gallerytext">
<p>This week's<br />heroes</p>
</div>
<div id="kranz"> <img src="images/kranz.png" alt="kranz" width="310px" /> </div>
<div id="pic1"> <img src="frontgallery/1.jpg" alt="gallery image 1" width="20%" /> </div>
<div id="pic2"> <img src="frontgallery/2.jpg" alt="gallery image 2" width="20%" /> </div>
<div id="pic3"> <img src="frontgallery/3.jpg" alt="gallery image 3" width="20%" /> </div>
<div id="pic4"> <img src="frontgallery/4.jpg" alt="gallery image 4" width="20%" /> </div>
<div id="pic5"> <img src="frontgallery/5.jpg" alt="gallery image 5" width="20%" /> </div>
<div id="pic6"> <img src="frontgallery/6.jpg" alt="gallery image 6" width="25%" /> </div>
<div id="pic7"> <img src="frontgallery/7.jpg" alt="gallery image 7" width="20%" /> </div>
<div id="pic8"> <img src="frontgallery/8.jpg" alt="gallery image 8" width="20%" /> </div>
<div id="pic9"> <img src="frontgallery/9.jpg" alt="gallery image 9" width="20%" /> </div>
<div id="entergal"> <a href="index.html">Enter contest</a> </div>
</div>
<div id="social">
<div class="table">
<ul id="sociallist">
<li><a href="http://eyeem.de" target="_blank"><img src="images/cam.png" alt="camera link" height="40%" /></a></li>
<li><a href="http://facebook.com" target="_blank"><img src="images/facebook.png" alt="facebook link" height="40%" /></a></li>
<li><a href="http://twitter.com" target="_blank"><img src="images/twitter.png" alt="twitter link" height="40%" /></a></li>
<li><a href="http://youtube.com" target="_blank"><img src="images/youtube.png" alt="youtube link" height="40%" /></a></li>
</ul>
</div>
</div>
<div id="foot">
<div class="tablefoot">
<ul id="footnav">
<li><a href="index.php"><strong>Compete</strong></a></li>
<li><a href="index.php"><strong>Score</strong></a></li>
<li><a href="index.php"><strong>Shop</strong></a></li>
<li><a href="index.php"><strong>More</strong></a></li>
</ul>
</div>
<div id="copy-text">
<p><strong>Copyright © 2012 Artwork Heroes, Inc. All photos © their respective owners</strong>
<p>
</div>
<div id="create-text">
<p><strong>Created with Scandinavian love in Copenhagen, Denmark</strong></p>
</div>
</div>
</body>
</html>
正当理由
市场
用于有限的
艺术品
。。。由最具创意的人群制作
<7.678美元共<24000美元本月捐赠
本月的捐款将帮助英国的流浪狗
保加利亚寻找新主人
0
天
0
小时数
0
分钟
0
秒
本周的英雄
版权所有©2012 Artwork Heroes，Inc.所有照片©其各自所有者
在丹麦哥本哈根用斯堪的纳维亚人的爱创造
#logo {
position:absolute;
width:200px;
left:50%;
margin-left:-100px;
}
如果你想让它以其父代为中心，那么父代应该相对定位。请同时发布你的html，更好的完整代码。我们可以更容易地找到这个问题。它都打包在一个.php文件中。。你能使用与这个问题相关的html吗？没有html代码就没有确定的解决方案。尽管如此，如果您使用php文件，应该有一个html标记来发布。
#logo {
position:absolute;
width:200px;
left:50%;
margin-left:-100px;
}