對準特定的內聯黎以UL

中心我有這樣的HTML結構對準特定的內聯黎以UL

<div class="top_menu"> 
    <ul> 
     <li class="left"><a href="" class="family-filter">asdas</a></li> 
     <li class="welcome">Welcome <span class="username">Guest</span></li> 
     <li class="right"><a href="#">Login</a></li> 
    </ul> 
</div>

這CSS代碼：

.top_menu { 
    padding: 20px; background-color: #fff; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottomright: 5px; 
    -moz-border-radius-bottomleft: 5px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
} 
.top_menu ul { margin: 0; padding: 0; line-height: 0; } 
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; } 
.top_menu ul .welcome { text-align:center; } 
.top_menu ul li a { font-size: 14px; }

我試圖對準.welcome到.top_menu > ul中間。我已經試過以上，這：

.center { margin-left: auto; margin-right: auto; display: block; clear: both; }

，但沒有成功，任何想法？ http://jsfiddle.net/U2mfK/

來源

2012-03-27 Alex

嘗試'display：block; margin：0 auto！important;' – 2012-03-27 12:00:22

感謝Ben，但是贏了也不行。 – Alex 2012-03-27 12:02:55

在定義li的全局樣式之前，您正在定義.welcome。這意味着.top_menu ul li中的任何樣式都會覆蓋.welcome（display：block;）中的樣式。把它放在下面這樣：

.top_menu ul { margin: 0; padding: 0; line-height: 0; } 
.top_menu ul li { display: inline; margin: 0; padding: 0; border: 1px solid red; } 
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; } 
.top_menu ul li a { font-size: 14px; }

UPDATE

通過絕對定位之外li標籤，你可以阻止他們推中心li偏離中心。

這樣的（我只包括爲清晰起見，其他樣式）：

.top_menu ul { position: relative; } 
.top_menu ul .left { position: absolute; left: 0; } 
.top_menu ul .welcome { text-align:center; display: block; margin: 0 auto; } 
.top_menu ul .right { position: absolute; right: 0; }

或者，你可以離開.left和.right因爲他們對自己的花車，公正的立場中心元素絕對是這樣：

.top_menu ul { position: relative; } 
.top_menu ul .left { float: left; } 
.top_menu ul .welcome { text-align:center; display: block; position: absolute; left: 50%; margin-left: -100px; width: 200px; } 
.top_menu ul .right { float: right; }

如果使用上面的方法，確保margin-left是寬度的一半。你必須爲這個方法指定一個寬度。如果你只比內容大，它會將內容居中，因爲text-align: center所以這不應該是個問題

來源

2012-03-27 12:02:59

這只是一個測試，不管怎麼樣都不會。 – Alex 2012-03-27 12:04:43

更改行內塊只是阻止 – 2012-03-27 12:08:06

是啊，那也做了詭計...編輯你的答案請 – Alex 2012-03-27 12:10:43

text-align: center;需要設置爲父級。因此將其從.welcome移至.top_menu ul :)

來源

2012-03-27 12:02:52 Frexuz

yeap，這是訣竅。感謝Frexuz – Alex 2012-03-27 12:05:24

是我還是它向右走一點點http://scrnSht.com/phmqbz？ – Alex 2012-03-27 12:12:55

你是對的。它看起來像是將物品置於可用空間中。所以如果你的左浮動元素比右浮動元素寬，那麼居中元素將會向右：（ – Frexuz 2012-03-27 12:25:30

對準特定的內聯黎以UL

回答

相關問題