問題描述
無法在所有移動瀏覽器上居中 ‑ 普通瀏覽器效果極佳 (Centering Not Possible On All Mobile Browsers ‑ Normal Browser Works Superb)
Oddly I have a weird problem with centering divs for mobile browsers. Like my title says: normal pc browser work just fine ‑ nada problemo =D but these mobile devices let my main content (under the button section) stick to the left. I tried many things ‑ looked for solutions here on stackoverflow too ‑ but the given tipps didn't help me so far ... the last thing i was able to center was using jQuery ‑ but I don't want to relay on that.
Here the code:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<link href="css/configcss.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="MM_preloadImages('pictures/Layout/Button/homeo.png','pictures/Layout/Button/grafiko.png','pictures/Layout/Button/webo.png','pictures/Layout/Button/reklamo.png','pictures/Layout/Button/fotoo.png','pictures/Layout/Button/videoo.png','pictures/Layout/Button/muziko.png')">
<div id="headbackground">
<div id="headcontent">
<div id="language"> <a href="index.html"><img src="pictures/tr.png" width="40" height="24" alt="tr"></a>
<br><br>
<a href="de/"><img src="pictures/de.png" width="40" height="24" alt="de"></a>
<br><br>
<a href="en/"><img src="pictures/en.png" width="40" height="24" alt="en"></a>
</div>
</div>
<div id="buttons">
<div id="navimiddle"><a href="/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','pictures/Layout/Button/homeo.png',1)"><img src="pictures/Layout/Button/homeo.png" alt="homebutton" width="190" height="50" id="home"></a><a href="tr/grafik/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('grafik','','pictures/Layout/Button/grafiko.png',1)"><img src="pictures/Layout/Button/grafik.png" alt="grafikbutton" width="141" height="50" id="grafik"></a><a href="tr/web/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('web','','pictures/Layout/Button/webo.png',1)"><img src="pictures/Layout/Button/web.png" alt="webbutton" width="101" height="50" id="web"></a><a href="tr/reklam/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('reklam','','pictures/Layout/Button/reklamo.png',1)"><img src="pictures/Layout/Button/reklam.png" alt="reklambutton" width="159" height="50" id="reklam"></a><a href="tr/foto/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('foto','','pictures/Layout/Button/fotoo.png',1)"><img src="pictures/Layout/Button/foto.png" alt="fotobutton" width="108" height="50" id="foto"></a><a href="tr/video/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('video','','pictures/Layout/Button/videoo.png',1)"><img src="pictures/Layout/Button/video.png" width="125" height="50" id="video" alt="videobutton"></a><a href="tr/muzik/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('muzik','','pictures/Layout/Button/muziko.png',1)"><img src="pictures/Layout/Button/muzik.png" alt="muzikbutton" width="200" height="50" id="muzik"></a>
</div>
</div>
</div>
<div id="contentbody">
<div id="contentup">
<div id="contentuplayout"><center>
<iframe width="950" height="370" src="http://www.youtube.com/embed/E‑dw03‑s1vA?rel=0" frameborder="0" allowfullscreen></iframe>
</center>
</div>
</div>
<div class="contentdevider"></div>
<div id="contentmain">
<div id="mainrow1">
<span class="linkstyle2">
<div class="smallarticel" >
<div class="smallarticelpic"><a href="tr/grafik/"><span class="rollover"><img src="pictures/Grafik‑Site/kurumsal‑kimlik.png" width="270" height="150" alt="ambalaj"> </span></a>
</div><hr>
<strong><a href="tr/grafik/">GRAFiK TASARIM</a></strong>
<hr>
<p>Profesyonel ve Modern Grafik Tasarım</p>
</div>
<div class="smallarticel2">
<div class="smallarticelpic"><a href="tr/web/"><img src="pictures/Grafik‑Site/webdesign.jpg" width="270" height="150" alt="ambalaj"></a>
</div><hr>
<strong><a href="tr/web/">WEB TASARIM</a></strong>
<hr>
<p>Profesyonel ve Modern Webtasarım
</p>
</div>
<div class="smallarticel">
<div class="smallarticelpic"><a href="tr/foto/"><img src="pictures/fotograf‑cekim.jpg" width="270" height="150" alt="ambalaj"></a>
</div>
<hr>
<strong><a href="tr/foto/">FOTOĞRAF ÇEKİMİ</a></strong>
<hr>
<p>Profesyonel Stüdyo ve Outdoor Çekimleri</p>
</div>
</span>
</div>
<div id="mainrow2">
<span class="linkstyle2">
<div class="smallarticel">
<div class="smallarticelpic"><a href="tr/reklam/"><img src="pictures/Reklam‑Site/radio.jpg" width="270" height="150" alt="ambalaj"></a>
</div><hr>
<strong><a href="tr/reklam/">REKLAM AJANSI</a></strong>
<hr>
<p>Profesyonel Reklam Tasarim ve Jingle</p>
</div>
<div class="smallarticel2">
<div class="smallarticelpic"><a href="tr/video/"><img src="pictures/video‑prodüskiyon.jpg" width="270" height="150" alt="ambalaj"></a>
</div><hr>
<strong><a href="tr/video/">Video Prodüksiyon</a></strong>
<hr>
<p>Profesyonel Video Prodüksiyon ve Animasyon</p>
</div>
<div class="smallarticel">
<div class="smallarticelpic"><a href="tr/muzik/"><img src="pictures/müzik‑prodüksiyon.jpg" width="270" height="150" alt="ambalaj"></a>
</div><hr>
<strong><a href="tr/muzik/">Müzik Prodüksiyon</a></strong>
<hr>
<p> Profesyonel Müzik Prodüksiyon ‑ Online Mastering ve Mixing ‑</p>
</div>
</span>
</div>
</div>
<div class="placeholder"></div>
</div>
<div id="footer">
<div id="footercontent">
<span class="linkstyle1">
<a href="tr/hakkimizda/">Hakkımızda</a> | <a href="tr/kariyer/">Kariyer</a> | <a href="tr/iletisim/">İletişim</a> | <a href="tr/gizlilik/">Gizlilik</a></span>
<div id="copyright">
Can‑Kat © 2012
</div>
</div>
</div>
</body>
</html>
AND THE STYLE/CSS : The problem is in the #contentbody the rest is centering just fine.
body {
background‑color:#FFF;
margin‑left:0px;
margin‑top:0px;
margin‑right:0px;
font‑family:Verdana, Geneva, sans‑serif;
}
#headbackground {
width:100%;
min‑width:1024px;
height:300px;
position:relative;
float:left;
background‑color:#2E2E2E;
}
#headcontent {
width:1000px;
height:180px;
position:relative;
margin‑left:auto;
margin‑right:auto;
margin‑top:10px;
text‑align:center;
background‑image:url(../media/Can‑Kat%20Productions%20Logo%20‑%20wordpress.png);
background‑repeat:no‑repeat;
background‑position:center;
}
#language {
width:40px;
position:relative;
float:left;
margin‑left:920px;
margin‑top:35px;
display:none;
}
#buttons {
width:1024px;
height:50px;
margin‑left:auto;
margin‑right:auto;
color:#FFF;
position:relative;
font‑size:20px;
}
#navimiddle
{
width:1024px;
height:50px;
position:reltive;
margin‑top:4px;
float:left;
background‑image:url(../pictures/Layout/Button/leiste.png);
}
#contentbody {
width:1000px;
margin‑top:‑55px;
margin‑left:50%;
left:‑500px;
float:left;
position:relative;
display:block;
}
#contentup {
width:997px;
background‑image:url(../media/body_top.png);
background‑repeat:no‑repeat;
position:relative;
}
#contentuplayout {
width:960px;
margin‑left:auto;
margin‑right:auto;
padding‑top:18px;
position:relative;
}
#contentmain {
width:902px;
margin‑left:auto;
margin‑right:auto;
margin‑top:‑10px;
position:relative;
}
#mainrow1 {
width:902px;
height:305px;
position:relative;
}
#mainrow2 {
width:902px;
height:280px;
margin‑top:5px;
position:relative;
}
#verticalrowleft {
width:600px;
height:auto;
color:#000;
position:relative;
float:left;
}
#verticalrowright {
width:295px;
height:auto;
position:relative;
float:right;
border‑left:1px solid #000;
text‑align:center;
}
#footer {
width:100%;
min‑width:1024px;
height:100px;
position:relative;
background‑color:#2E2E2E;
float:left;
}
#footercontent {
width:902px;
margin‑left:auto;
margin‑right:auto;
margin‑top:10px;
position:relative;
color:#FFF;
}
#copyright {
width:150px;
float:right;
position:relative;
}
/* ‑‑‑‑‑‑‑‑ Classes ‑‑‑‑‑‑‑‑‑ */
.rollover {
width:270px;
background‑image:url(../pictures/Layout/hover‑zoom.png);
background‑repeat:no‑repeat;
background‑color:transparent;
margin:auto;
}
.smallarticel {
width:280px;
height:296px;
background‑color:#DDD;
border:thin #333;
text‑align:center;
position:relative;
float:left;
border‑radius:5px;
}
.smallarticel2 {
width:280px;
height:296px;
margin‑left:26px;
margin‑right:26px;
background‑color:#DDD;
border:thin #333;
text‑align:center;
float:left;
position:relative;
border‑radius:5px;
}
.smallarticelpic {
width:270px;
margin‑left:5px;
margin‑top:5px;
position:relative;
background‑color:#000;
background‑image:url(../pictures/Layout/hover‑zoom.png);
}
.contentdevider {
width:960px;
height:40px;
margin‑left:auto;
margin‑right:auto;
background‑image:url(../pictures/contentdevider.png);
position:relative;
}
.placeholder { width:100%; height:30px; position:relative; float:left; }
.linkstyle1 A:link {color:#FFF; text‑decoration:none;}
.linkstyle1 A:visited {color:#FFF; text‑decoration:none;}
.linkstyle1 A:active {color:#FFF; text‑decoration:none;}
.linkstyle1 A:hover {
color: #F0F0F0;
text‑decoration: underline;
}
.linkstyle2 A:link {color:#000; text‑decoration:none;}
.linkstyle2 A:visited {color:#000; text‑decoration:none;}
.linkstyle2 A:active {color:#000; text‑decoration:none;}
.linkstyle2 A:hover {color:#000; text‑decoration:underline;}
img
{ border‑style: none; }
#language img { border‑radius:5px; }
.centertext { text‑align:center; }
a.link{
background:transparent url(a‑bg.png) no‑repeat ‑81px bottom;
}
‑‑‑‑‑
參考解法
方法 1:
If you wish for your content to be centred on a mobile device, you will probably need to add specific CSS for a mobile device. And instead of relying on pixel based sizes you will need to use percentages.
Centre Content Mobile Device
#container {
width: 100%
}
#content‑container {
width: 80%;
margin‑left: 10%;
margin‑right:10%;
}
Of course you could rewrite your whole CSS to be responsive to screen sizes. Here is a quick example of how you go about doing it. http://jsfiddle.net/4LSmq/
How Target Mobile Screens
// target small screens (mobile devices or small desktop windows)
@media only screen and (max‑width: 480px) {
/* CSS goes here */
}
/* high resolution screens */
@media (‑webkit‑min‑device‑pixel‑ratio: 2),
(min‑‑moz‑device‑pixel‑ratio: 2),
(min‑resolution: 300dpi) {
header { background‑image: url(header‑highres.png); }
}
/* low resolution screens */
@media (‑webkit‑max‑device‑pixel‑ratio: 1.5),
(max‑‑moz‑device‑pixel‑ratio: 1.5),
(max‑resolution: 299dpi) {
header { background‑image: url(header‑lowres.png); }
}
Second Solution
Try changing
#contentbody {
width:1000px;
margin‑top:‑55px;
margin‑left:50%;
left:‑500px;
float:left;
position:relative;
display:block;
}
to
#contentbody {
width:1000px;
margin‑right:auto;
margin‑left:auto;
position:relative;
display:block;
}
Your mobile screen is less than 1000px so your margin set in percentage is relative to the screen width which is less than 1000px in this case. Example http://jsfiddle.net/R9rSx/
Also it is wise to add, change the width until you get the desired look
<meta name="viewport" content="width=1200">
方法 2:
What about using meta tags?
<meta http‑equiv="Content‑Type" content="text/html; charset=utf‑8">
<meta name="viewport" content="initial‑scale=1, maximum‑scale=1, user‑scalable=no, width=device‑width">
(by canny、Michael、Painkiller)