Question

奇怪的是，我有一个奇怪的问题，居中divs 移动浏览器。就像我的标题所说：普通的PC浏览器工作得很好 - nada problemo = D但这些移动设备让我的主要内容（在按钮部分下）坚持到左边。我尝试了很多东西 - 寻找解决方案这里也是stackoverflow - 但是给定的tipps没有到目前为止帮助我......最后一件事我能够集中精力使用jQuery - 但我不想继续这样做。

这里是代码：

<!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&#305;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&#305;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&#286;RAF &Ccedil;EK&#304;M&#304;</a></strong>
  <hr>
  <p>Profesyonel St&uuml;dyo ve Outdoor &Ccedil;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&uuml;ksiyon</a></strong>
  <hr>
  <p>Profesyonel Video Prod&uuml;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&uuml;zik Prod&uuml;ksiyon</a></strong>
  <hr>
  <p>&nbsp;Profesyonel M&uuml;zik Prod&uuml;ksiyon &nbsp; - 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&#305;m&#305;zda</a> | <a href="tr/kariyer/">Kariyer</a> | <a href="tr/iletisim/">&#304;leti&#351;im</a> | <a href="tr/gizlilik/">Gizlilik</a></span>
    <div id="copyright">
    Can-Kat &copy; 2012
    </div>    
  </div>    
</div>
</body>
</html>

AND STYLE / CSS：问题在于#contentbody，剩下的就是中心就好了。

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

Answer 1

如果您希望将内容集中在移动设备上，则可能需要为移动设备添加特定的CSS。而不是依赖基于像素的大小，您将需要使用百分比。

中心内容移动设备

#container {
    width: 100%
}

#content-container {
    width: 80%;
    margin-left: 10%;
    margin-right:10%;
}

当然，您可以重写整个CSS以响应屏幕尺寸。这是一个快速举例说明你如何去做。 http://jsfiddle.net/4LSmq/

目标手机屏幕

// 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); } 
}

第二种解决方案

尝试更改

#contentbody {
    width:1000px;
    margin-top:-55px;
    margin-left:50%;
    left:-500px;
    float:left;
    position:relative;
    display:block;
}

到

#contentbody {
    width:1000px;
    margin-right:auto;
    margin-left:auto;
    position:relative;
    display:block;
}

您的移动设备屏幕小于1000像素，因此以百分比设置的边距相对于屏幕宽度（在这种情况下小于1000像素）。示例http://jsfiddle.net/R9rSx/

同样明智的做法是添加，更改宽度，直到获得所需的外观

<meta name="viewport" content="width=1200">

Answer 2

使用元标记怎么样？

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

所有移动浏览器都无法居中 - 普通浏览器工作精湛

2 个答案:

中心内容移动设备

目标手机屏幕

第二种解决方案