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

Posted 2023-04-13

【中文标题】如何为移动设备“居中”<div>

【英文标题】：How to 'center' <div > for mobile

【发布时间】：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>

【参考方案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"/>