css - 无法在所有移动浏览器上居中 - 普通浏览器效果极佳

标签 css html mobile browser

奇怪的是，我在将 div 居中时遇到了一个奇怪的问题 移动浏览器。正如我的标题所说:普通电脑浏览器 工作得很好 - nada problemo =D 但这些移动 设备让我的主要内容(在按钮部分下) 坚持左边。我尝试了很多东西 - 寻找解决方案 在 stackoverflow 上也是如此 - 但给定的小费没有 到目前为止帮助我......我能够集中的最后一件事 正在使用 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 THE 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;
}

最佳答案

如果您希望您的内容以移动设备为中心，您可能需要为移动设备添加特定的 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">

关于css - 无法在所有移动浏览器上居中 - 普通浏览器效果极佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14932003/

上一篇：javascript - 打印一个 Html 可滚动页面 : scrollable part not printed

下一篇：javascript - 如何通过单击第一个 div 值在第二个 div 中显示一个 div 值

相关文章：

jquery - 使用 jQuery animate 使 div 从中心向下滑动？

javascript - 获取由 PHP 生成的兄弟 div id

android - 我可以在Xamarin之外使用MVVMCross吗？

css - 如何将CSS设置为移动网站

c++ - 使 Flutter C/C++ 互操作示例工作

html - 我怎样才能有响应线 '-----' ？

html - 是否可以在没有 DB 或 PHP 的情况下进行用户身份验证？

CSS 元素框阴影问题

html - 如何使用 CSS 去除 html 表格内的白线

javascript - 如何从左上角获取可滚动 div 或 svg 内的鼠标坐标？

©2024 IT工具网  联系我们