如何在移动设备上将 <div> 元素居中显示

Question

这段代码在桌面端可以正常工作，但是在移动端会自动左对齐，即使我知道自己的方法不正确。

我尝试使用@media添加一些代码，但是无法解决问题。

我主要尝试了right: float: padding:等属性，但是没有任何对齐命令起作用。

@media not all and (min-width: 780px) {
  #centeredmenu { max-width: 220px; }
}



#centeredmenu {
   clear:both;
   min-width: 220px;
}


#centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
 
}
#centeredmenu ul li {
   margin:1px 0 0 1px;
   padding:0;
   float: left;
   position: relative;
   left:50%;
   top:11px;

}
#centeredmenu ul li a {
    z-index: 999;
   display:block;
   margin:0;
   padding:.4em .2em .4em;
   line-height:1em;
   background:#ddd;
   text-decoration:none;
   color:#444;
    width: 70px;
   font-size: 13px;
    font-weight: 100;
  text-align: center;
   font-family: Proxima Nova;
}
#centeredmenu ul li.active a {
   color:#fff;
   background:#D2383C;

  
}
#centeredmenu ul li a:hover {
   background:#36f; /* Top menu items background colour */
   color:#fff;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#777777; /* Top menu items background colour */
   color:#fff;
}

<div id="centeredmenu">
<ul>
<li class=""><a href="#">2014</a></li>
<li class="active"><a href="#">2013</a></li>
<li class=""><a href="#">2012</a></li>
<li class=""><a href="#">2011</a></li>
<li class=""><a href="#">2010</a></li>
<li class=""><a href="#">2009</a></li>
<li class=""><a href="#">2008</a></li>
<li class=""><a href="#">2007</a></li>
<li class=""><a href="#">2006</a></li>
<li class=""><a href="#">2005</a></li>
  
</ul>
</div>

- Kamil

Answer 1

您可以使用：

margin: auto;

那么你的CSS定义将如下所示：

#centeredmenu {
   clear:both;
   min-width: 220px;
   margin: auto;
}

- rasso

Answer 2

我相信为#centeredmenu添加margin: 0 auto;可以帮助你解决问题...

@media not all and (min-width: 780px) {
  #centeredmenu { max-width: 220px; }
}



#centeredmenu {
   margin: 0 auto;
   clear:both;
   min-width: 220px;
}


#centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
 
}
#centeredmenu ul li {
   margin:1px 0 0 1px;
   padding:0;
   float: left;
   position: relative;
   left:50%;
   top:11px;

}
#centeredmenu ul li a {
    z-index: 999;
   display:block;
   margin:0;
   padding:.4em .2em .4em;
   line-height:1em;
   background:#ddd;
   text-decoration:none;
   color:#444;
    width: 70px;
   font-size: 13px;
    font-weight: 100;
  text-align: center;
   font-family: Proxima Nova;
}
#centeredmenu ul li.active a {
   color:#fff;
   background:#D2383C;

  
}
#centeredmenu ul li a:hover {
   background:#36f; /* Top menu items background colour */
   color:#fff;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#777777; /* Top menu items background colour */
   color:#fff;
}

<div id="centeredmenu">
<ul>
<li class=""><a href="#">2014</a></li>
<li class="active"><a href="#">2013</a></li>
<li class=""><a href="#">2012</a></li>
<li class=""><a href="#">2011</a></li>
<li class=""><a href="#">2010</a></li>
<li class=""><a href="#">2009</a></li>
<li class=""><a href="#">2008</a></li>
<li class=""><a href="#">2007</a></li>
<li class=""><a href="#">2006</a></li>
<li class=""><a href="#">2005</a></li>
  
</ul>
</div>

- GreyRoofPigeon

Answer 3

你只需要在你的HTML页面顶部添加那个标签即可。

<meta name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0"/>

- Ikbel