当我在手机上打开页面时,它不会居中,而是全部转到左侧,而当我在计算机上打开它时,一切看起来都不错。
我尝试在页面上添加和删除代码,例如添加最小宽度/最大宽度,更改重音 - %/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 更新您的身体属性,以删除底部的滚动。