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

回答

相關問題