如何为移动设备“居中”<div>答案

【问题标题】：How to 'center' <div > for mobile如何为移动设备“居中”<div>
【发布时间】：2015-10-01 18:57:38
【问题描述】：

所以它适用于桌面，即使我确定我做错了，但它会在移动设备上与左对齐。

我尝试向@media 添加一些代码，但无法弄清楚。

我主要是在搞砸右：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>

【问题讨论】：

标签： css menu navigation alignment center

【解决方案1】：

你可以使用

margin: auto;

那么你的css定义如下

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

您只需将该标签添加到 HTML 页面的顶部

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

【讨论】：