为什么我在移动网站上没有居中对齐?



当我在手机上打开页面时,它不会居中,而是全部转到左侧,而当我在计算机上打开它时,一切看起来都不错。

我尝试在页面上添加和删除代码,例如添加最小宽度/最大宽度,更改重音 - %/px .

.HTML--------------

<html>
    <head>
        <title> Farbawlesie </title>
        <link rel="stylesheet" type="text/css" href="styl.css">
        <meta http-equiv="Imagetoolbar" content="no" />
        <link rel="icon" type="image/png" href="naszywka3.gif">
        <link rel="shortcut icon" href="farbawlesie.pl/favicon.ico">
        <meta charset= "UTF-8">
    </head>
    <body oncontextmenu="return false" background="las.jpg">
        <div id="page-wrap">
            <div id="baner">
                <img src="banern.png"  height="250">
            </div>
            <hr color="white">
            <br><br><br>
            <center>
                <div id="menu">
                 <ol>
                    <li><font color="yellow">⇒</font><a href="index.html"> Start</a></li>
                    <li><font color="yellow">⇒</font><a href="my.html"> O nas</a>
                        <ul>
                            <li>
                                <a href="druzyna.html">Drużyna</a>
                            </li>
                            <li>
                                <a href="zasady.html">Zasady</a>
                            </li>
                        </ul>
                    </li>
                    <li><font color="yellow">⇒</font><a href="Terminarz.html"> Terminarz</a></li>
                    <li><font color="yellow">⇒</font><a href="Forum.html"> Forum</a></li>
                    <li><font color="yellow">⇒</font><a href="Galeria.html"> Galeria</a></li>
                    <li><font color="yellow">⇒</font><a href="Kontakt.html"> Kontakt</a></li>
                  </ol>
                  </div>
            </center> 
            <br><br><br><br>
            <hr color="white">
            <br><br><br><br>
            <font size="5" color="white" family="Times">
            Witaj na naszej stronie ! ☺
            <br>
            Masz pytanie ? Skontaktuj się z nami ! Więcej w zakładce "Kontakt".
            <br><br>
            <center>     
                <div id="srodek_naglowek">
                    <img src="dr.jpg" width="850px"   height="420px"/>
                    <img src="baner.png" width="850px"  height="420px" />
                    <img src="farba.jpg" width="850px"   height="420px"/>
                    <img src="far6.jpg"width="850px"  height="420px"/>
                    <img src="3.png" width="850px"   height="420px"/> 
                    <img src="swt.jpg" width="850px"  height="420px"/>
                </div>
                <center>
                    <br><br><br><br>
                    <hr color="white">
                    <br><br> 
                    <center>
                        <font color="red"><h2>Naszywki członków drużyny</h2></font>
                        <img src="naszywka3.gif">
                        <font size="3" color="white">Otrzymuje każdy członek</font>
                        <br><br><br>
                        <img src="naszywka2.gif">
                        <font size="3" color="white">Otrzymuje osoba która brała 3 razy udział w nocnym strzelaniu</font>
                        <br><br><br>
                        <img src="naszywka1.gif">
                        <font size="3" color="white">Otrzymuje osoba która ma 5 letni staż w stowarzyszeniu</font> 
                        <br><br><br>
                        <hr color="white">
                        <div id="stopka">
                            Copyright © Wszelkie prawa zastrzeżone
                        </div>
                    </div>
                </body>
            </html>

.CSS-----------------

head {
    text-align: center;
}
body {
    width: 100%;
    margin: auto;
}
#srodek_naglowek {
    text-align: center;
}
#baner {
    text-align: center;
}
a {
    text-decoration: none; 
    color: white;
    text-align: center;
} 
#page-wrap {
    width: 100%;
    margin: 0 auto;
}
#menu {
    text-align: center;
    width: 100%;
    font-family: Arial;
}
ol {
    text-decoration: none; 
    color: white;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 18px;
    height: 2em;
    line-height: 2em;
    text-align: center; 
}
ol > li {
    float: left;
    width: 150px;
}
ol > li > a: hover {
    color: grey;
}
ol > li: hover {
}
#stopka {
    color: white;
    text-align: center;
    font-size: 10px;
}
ol  {
}
ol > li > ul > li {
}
ol > li > ul > li: hover {
}
ol > li > ul > li: hover a {
    color: grey;
}
ol > li > ul {
    display: none;
}
ol > li: hover > ul {
    display: block;
}
ol > li > ul {
    display: none;
}
ol > li: hover > ul {
    display: block;
}

网站:http://www.farbawlesie.pl

标题图像的硬编码宽度为 1300px 。在较小的屏幕尺寸中,没有空间容纳图像,因此您会看到溢出。添加以下CSS是解决此问题的一种方法:

#baner img {
  max-width: 100%;
  height: auto;
}

罪魁祸首是图像上的硬编码尺寸。如果您在图像上设置宽度和/或高度,浏览器将不会重新计算其大小并拉伸某些div 以适合它们。

最快的解决方法是通过更改以下内容从此图像中删除高度:

<img src="banern.png"  height="250">

对此:

<img src="banern.png">

然后允许此图像采用 100% 宽度:

#baner img {
    width: 100%
}

但是,这不会居中对齐其他图像行。为了帮助解决这个问题,您可以使用 overflow-x:hidden 更新您的身体属性,以删除底部的滚动。

相关内容

  • 没有找到相关文章

最新更新