html - 无论窗口大小如何，都将图像定位在溢出的中心-6ren

html - 无论窗口大小如何，都将图像定位在溢出的中心

转载作者：太空宇宙更新时间：2023-11-03 18:53:48

我在网站上定位 Logo (img) 时遇到了一些问题。我希望它在任何时候和窗口大小都居中。同时，我希望它重叠/溢出到它所在的 div 的底部。

它位于 div main 中，我希望它覆盖名为 nav 的 div。让它重叠我没有遇到任何问题，但它根本不会保持居中!

有什么建议吗？

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>

最佳答案

如果你想将绝对定位的图像居中，你可以这样做:

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

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

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

关于html - 无论窗口大小如何，都将图像定位在溢出的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14093253/

文章推荐： scheme - 计算列表和子列表的元素

文章推荐： lisp - 比较 Common Lisp 中 AllegroGraph Prolog 中的 RDF 文字

文章推荐： Lisp函数解释

文章推荐： python - 在回溯期间显示变量

javascript (函数(窗口){})(窗口)
https://github.com/mattdiamond/Recorderjs/blob/master/recorder.js中的代码我不明白 JavaScript 语法，比如 (functio
ios - 在 iOS 8 中查找 TopMost 窗口/FrontMost 窗口
在 iOS 7 及更早版本中，如果我们想在应用程序中找到 topMostWindow，我们通常使用以下代码行 [[[UIApplication sharedApplication] windows]
JavaScript 窗口
我已经尝试解决这个问题很长一段时间了:我无法访问窗口的 url，因为它位于另一个域上..有一些解决方案吗？ function login() { var cb = window.ope
c# - 将ffmpeg流传递给c#窗口
是否可以将 FFMPEG 视频流传递到 C# 窗口？现在它在新窗口中作为新进程打开，我只是想将它传递给我自己的 SessionWindow。此时我像这样执行ffplay: public void E
R:窗口()函数
我有一个名为 x 的矩阵看起来像这样: pTime Close 1 1275087600 1.2268 2 1275264000 1.2264 3 1275264300 1.2
emacs - Emacs如何自动跳转到新创建的缓冲区/窗口
在编译时，发生搜索，grep搜索等，Emacs会在单独的窗口中创建一个新的缓冲区来显示结果，有没有自动跳转到那个窗口的方法？这很有用，因为我可以使用 n 和 p 而不是 M-g n 和 M-g p 移
从批处理文件启动时的 PowerShell 窗口
我有一个启动 PowerShell 脚本的批处理文件。批处理文件: START Powershell -executionpolicy RemoteSigned -noexit -file "MyS
cocoa - NSWindowController 窗口？
我有一个基于菜单栏的应用程序，单击图标时会显示一个窗口。在 Mac OS X Lion 上一切正常，但由于某种原因，在 Snow Leopard 和早期版本的 Mac OS X 上会出现错误。任何时候
带有集成标题栏和工具栏的 macOS 窗口？
在 macOS 中，如何在 Xcode 和/或 Interface Builder 中创建带有“集成标题栏和工具栏”的窗口？这是“宽标题栏”类型的窗口，已添加到 OS X 10.10 Yosemit
javascript - 为什么 this == 窗口？
在浏览器 (Chrome) 中 JavaScript: var DataModler = { Data: { Something: 'value' }, Process: functi
javascript - 关闭另一个选项卡/窗口
我有 3 个 html 页面。第 1 页链接到第 2 页，第 2 页链接到第 3 页(为了简单起见)。我希望页面 2 中的链接打开页面 3 并关闭页面 1(选项卡 1)。据我了解，您无法使用 Ja
javascript - 如何使用下拉菜单打开新框架/窗口
当点击“创建节点”按钮时，如何打开一个新的框架或窗口？我希望新框架包含一个文本字段和下拉菜单，以便用户可以选择一个选项。 Create node Search node
托管用户控件的 WPF 窗口
我有一个用户控件，用于编辑应用程序中的某些对象。我最近遇到一个实例，我想弹出一个新的对话框(窗口)来托管此用户控件。如何实例化新窗口并将需要设置的任何属性从窗口传递到用户控件？感谢您的宝贵时间。
kotlin - 具有自定义计数标准的RxJava缓冲区/窗口
我有一个Observable，它发出许多对象，我想使用window或buffer操作对这些对象进行分组。但是，我不想指定count参数来确定窗口中应包含多少个对象，而是希望能够使用自定义条件。例如，
JavaFX 防止在单击按钮时打开新阶段(窗口)
我有以下代码，它打开一个新的 JavaFX 阶段(我们称之为窗口)。 openAlertBox.setOnAction(e -> { AlertBox alert = AlertBox
ios - 如何检查当前的iOS设备是否支持多个场景/窗口？
我要添加一个“在新窗口中打开”上下文菜单项，该菜单项将以新的UIScene打开我的应用程序文档之一。当然，我只想在实际上支持多个场景的设备上显示该菜单项。目前，我只是在检查设备是否是使用旧设备的iP
macos - 我可以使用哪些命令行工具来获取每个平台上当前事件的应用程序/窗口？
我正在尝试创建一个 AIR 应用程序来记录应用程序的使用情况，使用 AIR 从系统获取信息的唯一简单方法是使用命令行工具和抓取标准输出 . 我知道像这样的工具顶部和 ps 对于 OS X，但它们
python - 如何打印一个turtle()窗口？
所以我有这个简单的 turtle 螺旋制作器，我想知道是否有一种方法可以打印出由该程序创建的我的设计副本。代码: import turtle x= float(input("Angle: ")) y
c# - 将快速文本输入发送到另一个进程(窗口)
我正在编写一个 C# WPF 程序，它将文本消息发送到另一个程序的窗口。我有一个宏程序作为我的键盘驱动程序 (Logitech g15) 的一部分，它已经这样做了，尽管它不会将击键直接发送到进程，而是
C 窗口 sendto()
我尝试使用以下代码通过 UDP 发送，但得到了奇怪的结果。 if((sendto(newSocket, sendBuf, totalLength, 0, (SOCKADDR *)&sendAd

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 无论窗口大小如何，都将图像定位在溢出的中心