html - 无论窗口大小如何，都将图像置于中心并溢出

Question

我img在我的网站上定位徽标 ( ) 时遇到了一些问题。我希望它始终居中并且窗口大小。同时，我希望它在它所在的 div 的底部重叠/溢出。

它被放置在 div 中main，我希望它越过名为nav. 我让它重叠没有任何问题，但它根本不会保持居中！

有什么建议么？

CSS

body {
    width:100%;
    font-family: Cusmyr, sans serif;
    font-size:2em;
    margin:0em;

}

@font-face {
    font-family:Cusmyr;
    src: url('font/myriadproregot.otf'), url('font/myriadproregsv.svg'), url('font/myriadproregtt.ttf');
}   

#nav {
    background:#ffffff;
    width:100%;
    height:4em;
    margin-top:-18px;

}    

#nav ul {
    list-style-type:none;
}

#nav li {
    display:inline;
    float:left;
    width:2%;
    margin-left:10%;
    margin-right:10%;
    margin-top:5%;
}

#nav a {
    display:block;
    width:20%;
    margin-right:0% auto;
    padding-left:0% auto;
    color:#5E09CB;
    text-decoration:none;
}

.clear {
    clear:both;
}

#logo {
    position: absolute;  
}

#main {
    width:100%;
    position:relative;
    border-top: 0.1em solid #000000;
}       

#main img {
    margin-bottom:-0.1em;
    padding:0em;
}           

#text-left p {
    position:absolute;
    color:#ffffff;
    padding-left:8%;
    padding-top:8%;
    letter-spacing:0.1em;
    line-height:1.1;
}

#text-right p {    
    position:absolute;
    color:#ffffff;
    padding-left:75%;
    padding-top:8%;
    letter-spacing:0.1em;
    line-height:1.1;
}

#enter {
    display:block;
    position:absolute;
    width:7em;
    height:1.5em;
    bottom:5%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    background-color:#39895B;
    -moz-box-shadow: 0px 3px 14px #000000;
    -webkit-box-shadow: 0px 3px 14px #000000;
    box-shadow: 0px 3px 14px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
}

#enter a {
    position:absolute;
    text-align:center;
    font-size:1em;
    line-height:0.0em;
    color:#ffffff;
    margin-top:0.8em;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    text-decoration:none;
}   


#donations p {
    position:absolute;
    color:#ffffff;
    font-size:0.65em;
    text-align:left;
    margin-bottom:10%;
    left:1%;
    width:12em;
}

#donations {
    position:relative;
    width:100%;
    height:8em;
    background-color:#333334;
    margin-top:-1%;
    border-top:0.1em solid #000000;
    overflow:hidden;
}

#donations a {
    display:block;
    position:absolute;
    text-align:center;
    font-size:0.8em;
    width:6em;
    padding:0.2em;
    height:1.1em;
    bottom:8%;
    left:10%;
    right:0;
    background-color:#5E09CB;
    color:#ffffff;
    -moz-box-shadow: 0px 3px 14px #000000;
    -webkit-box-shadow: 0px 3px 14px #000000;
    box-shadow: 0px 3px 14px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    text-decoration:none;       
}

.dontime p {
    position:absolute;
    text-decoration:underline;
    float:right;
    right:0;
    width:15em;
    top:-3%;
    margin-right:1%;
    color:#ffffff;
    font-size:0.65em;
}


.meter {
    height:20px;
    width:30%;
    position:relative;
    background:#555;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:3px;
    margin-top:1%;
    left:1%;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
    display: block;
    height: 100%;
       -webkit-border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
           -moz-border-radius-topright: 3px;
        -moz-border-radius-bottomright: 3px;
               border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        -webkit-border-top-left-radius: 3px;
     -webkit-border-bottom-left-radius: 3px;
            -moz-border-radius-topleft: 3px;
         -moz-border-radius-bottomleft: 3px;
                border-top-left-radius: 3px;
             border-bottom-left-radius: 3px;
    background-color: rgb(43,194,83);
    background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(43,194,83)),
      color-stop(1, rgb(84,240,84))
     );
    background-image: -webkit-linear-gradient(
      center bottom,
      rgb(43,194,83) 37%,
      rgb(84,240,84) 69%
     );
    background-image: -moz-linear-gradient(
      center bottom,
      rgb(43,194,83) 37%,
      rgb(84,240,84) 69%
     );
    background-image: -ms-linear-gradient(
      center bottom,
      rgb(43,194,83) 37%,
      rgb(84,240,84) 69%
     );
    background-image: -o-linear-gradient(
      center bottom,
      rgb(43,194,83) 37%,
      rgb(84,240,84) 69%
     );
    -webkit-box-shadow: 
      inset 0 2px 9px  rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow: 
      inset 0 2px 9px  rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

        .animate > span:after {
            display: none;
        }

        @-webkit-keyframes move {
            0% {
               background-position: 0 0;
            }
            100% {
               background-position: 50px 50px;
            }
        }


        .orange > span {
            background-color:#5E09CB;
            background-image: -moz-linear-gradient(top, #8959c6, #5E09CB);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8959c6),color-stop(1, #5E09CB));
            background-image: -webkit-linear-gradient(#8959c6, #5E09CB); 
        }


#gallery {
    position:relative;
    margin-top:0em;
    width:100%;
    padding-bottom:5em;
    background-color:#ffffff;
    border-top:0.1em solid #000000;
    overflow:hidden;

}


#gallerytext p {
    color:#DACB29;
    text-align:center;
    margin-top:4%;
}    

#kranz img {
    display:block;
    margin-top:-5%;
    margin-left:auto;
    margin-right:auto;    
}

#pic1 img {
    display:block;
    float:left;
    margin-left:10%;
    margin-top:-7%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;           
}

#pic2 img {
    display:block;
    float:left;
    margin-left:10%;
    margin-top:10%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

#pic3 img {
    display:block;
    float:left;
    margin-left:10%;
    margin-top:-7%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

#pic4 img {
    display:block;
    float:left;
    margin-top:22%;
    margin-left:-80%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

#pic5 img {
    display:block;
    float:left;
    margin-top:35%;
    margin-left:-50%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;       
}

#pic6 img {
    display:block;
    float:left;
    margin-top:22%;
    margin-left:-20%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;       
}

#pic7 img {
    display:block;
    float:left;
    margin-top:50%;
    margin-left:-85%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

#pic8 img {
    display:block;
    float:left;
    margin-top:60%;
    margin-left:-55%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

#pic9 img {
    display:block;
    float:left;
    margin-top:55%;
    margin-left:-25%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}

.clock {
    position:absolute;
    right:-1.5%;
    bottom:1%;
    width:25em;
}

.clock_days {
    margin-right:0.5%;
    float:left;
}
.clock_hours {
    margin-right:0.5%;
    float:left;
}
.clock_minutes {
    margin-right:0.5%;
    float:left;
}
.clock_seconds {
    margin-right:0.5%;
    float:left;
}

.bgLayer { 
    background-image:url(img/bg.png); 
    background-repeat:no-repeat;
    position:relative; 
}

.topLayer { 
    position:absolute; 
    background-image:url(img/top.png); 
    width:6em;
    height:6em;
    margin-bottom:5%;
    background-repeat:no-repeat;
}

.text { position:absolute; top:5%; left:5%; width:10%;  height:10%;}

.val {
    font-family:Myriad Pro;
    font-size:47px;
    font-weight:bold;
    color:#FFF;
    text-align:right;
    line-height:2em;
    margin-top:2%;
    width:10%;
}

.type_days {
    font-family:Myriad Pro;
    color:#ff6565;
    width:3%;
    text-align:center;
    font-size:13px;
    line-height:1.5em;
    font-weight:bold;
    text-transform:uppercase;
}

.type_hours {
    font-family: Myriad Pro;
    color:#378cff;
    width:3%;
    text-align:right;
    font-size:13px;
    line-height:1.5em;
    font-weight:bold;
    text-transform:uppercase;
}

.type_minutes {
    font-family: Myriad Pro;
    color:#9cdb7d;
    width:3%;
    text-align:right;
    font-size:13px;
    line-height:1.5em;
    font-weight:bold;
    text-transform:uppercase;
}

.type_seconds {
    font-family: Myriad Pro, Arial, Helvetica, sans-serif;
    color:#ffdc50;
    width:3%;
    text-align:right;
    font-size:13px;
    line-height:1.5em;
    font-weight:bold;
    text-transform:uppercase;
} 

#entergal a {
    position:absolute;
    text-align:center;
    font-size:1em;
    line-height:0.0em;
    color:#ffffff;
    margin-top:0.8em;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    text-decoration:none;
}

#entergal   {
    display:block;
    position:absolute;
    width:7em;
    height:1.5em;
    bottom:2%;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    background-color:#39895B;
    -moz-box-shadow: 0px 3px 14px #000000;
    -webkit-box-shadow: 0px 3px 14px #000000;
    box-shadow: 0px 3px 14px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
}


#social {
    position:relative;
    width:100%;
    height:4em;
    background-color:#5E09CB;
    margin-top:-1%;
    border-top:0.1em solid #000000;
    overflow:hidden;
}

.table {
    display:table;
    margin:0 auto;
}

#social ul {
    list-style-type:none;
    padding-left:30%;
    padding-right:30%;
}

ul#sociallist {
    min-width:17em;
    list-style:none;
    padding-top:none;
}

ul#sociallist li {
    display:inline;
}

#foot {
    position:relative;
    width:100%;
    padding-bottom:0.5em;
    background-color:#333334;
    margin-top:-1%;
    border-top:0.1em solid #000000;
    overflow:hidden;        
}

.tablefoot {
    display:table;
    margin:0 auto;
}

#foot ul {
    list-style-type:none;
    padding-left:30%;
    padding-right:30%;    
}

ul#footnav {
    min-width:25em;
    padding-top:none;
    list-style:none;
    padding-left:25%;
}

ul#footnav li {
    display:inline;
    padding:0.5%;    
}


#foot a {
    text-decoration:none;
    color:#1D88B5;
}

#copy-text p {
    text-align:center;
    color:#FFFFFF;
    font-size:0.5em;
}

#create-text p {
    text-align:center;
    color:#1D88B5;
    font-size:0.25em;
}

html

<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>

Answer 1

如果要将绝对定位的图像居中，可以这样做：

#logo {
position:absolute;
width:200px;
left:50%;
margin-left:-100px;
}

将宽度替换为徽标的实际宽度，负左边距是该宽度的一半。

如果您希望它以其父级为中心，则父级应该相对定位。