移动端如何‘居中’<div >

Question

所以它适用于台式机，即使我确定我做错了，但它在移动设备上是靠左对齐的。

我试着在@media中添加一些代码，但是没有弄清楚。

我主要是在处理right: float: padding：

任何align命令都不起作用

​

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

​

Answer 1

你可以使用

margin: auto;

那么您的css定义将如下所示

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

Answer 2

我相信将margin: 0 auto;添加到#centeredmenu中会为您带来好处……

​

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

​