CSS：不能居中UL

在this page，我有一个页脚菜单＃menu-footer-menu; “关于 - 选择你的城市 - 步行如何...”由Wordpress生成。CSS：不能居中UL

<div class="menu-footer-menu-container"> 
    <ul id="menu-footer-menu" class="menu"> 
    <li id="menu-item-143"><a href="#">About</a></li> 
    <li id="menu-item-151"><a href="#">Select Your City</a></li> 
    <li id="menu-item-162"><a href="#">How Walks Work</a></li> 
    <li id="menu-item-160"><a href="#">FAQs</a></li> 
    <li id="menu-item-166"><a href="#">Blog</a></li> 
    <li id="menu-item-153"><a href="#">Partners</a></li> 
    <li id="menu-item-154"><a href="#">Press</a></li> 
    <li id="menu-item-144"><a href="#">Privacy Policy</a></li> 
    <li id="menu-item-145"><a href="#">Site Map</a></li> 
    <li id="menu-item-146"><a href="#">Terms &#038; Conditions</a></li> 
    </ul> 
</div>

我想居中该菜单。

我尝试了以下CSS，但没有奏效。

div.menu-footer-menu-container {text-align:center;} 
ul#menu-footer-menu.menu { 
    list-style-type: none; 
    width: 760px !important; 
    margin: 0 auto !important; 
    display: inline-block !important; 
} 
ul#menu-footer-menu li { 
    display: inline-block !important; 
    margin-right: 14px; 
    margin-right: 1rem; 
}

来源

2014-05-09 Steve

-1

在CSS中添加一个样式文本对齐：中心到＃页脚菜单。

来源

2014-05-09 07:22:59 ahalya

@Steve你看过其他的答案真的... ？ –

是的，我做了保罗。 – Steve

@Steve等，你是怎么得出这样的结论的：额外的CSS（比较慢的解析）比修改CSS表达式更好？ –

您需要添加一个包装元素100％的宽度居中的DIV在

像：

使用替代

<div class="wrapper"> 
<div class="menu-footer-menu-container"> 
    ... 
</div> 


.wrapper{ width:100% }

来源

2014-05-09 07:20:16 AHaberl

在铬测试这种情况下 –

display:blockinline-block

ul#menu-footer-menu.menu { 
    list-style-type: none; 
    width: 760px !important; 
    margin: 0 auto !important; 
    display: block !important; 
}

来源

2014-05-09 07:21:19

不正确的，它正确中心 - 我应该想象这是所有体面的浏览器，但X-测试 –

使用下面的CSS来代替你拥有的。我刚刚更改了ul＃menu-footer-menu.menu的显示屏以阻止其他任何事情。

div.menu-footer-menu-container {text-align:center;} 
ul#menu-footer-menu.menu { 
    list-style-type: none; 
    width: 760px !important; 
    margin: 0 auto !important; 
    display: block !important; 
} 
ul#menu-footer-menu li { 
    display: inline-block !important; 
    margin-right: 14px; 
    margin-right: 1rem; 
}

来源

2014-05-09 07:24:12

Err ...我打败你这个答案：P –

尝试添加CSS样式：

.menu-footer-menu-container 
{ 
    text-align: center; 
}

enter image description here

来源

2014-05-09 07:28:49

你有两种方法可以做到这

宽度降解中心标签

<center> 
    <ul> 
     ... 
    </ul> 
    </center>

创建另一个div来强制中心

.center {margin：auto; text-align：center; }
```
<div class="center"> 
    <ul> 
     ... 
    </ul> 
    </div> 
```

注：该标签必须是inline-block的。

width text-align：center;

ul{ text-align: center; } 

    <center> 
    <ul> 
     ... 
    </ul> 
    </center>

来源

2014-05-09 07:29:20

CSS：不能居中UL

回答

相关问题