當文本寬度太大時，如何在固定寬度元素中顯示居中文本？

Question

我有一個帶固定寬度元素的內聯列表，每個元素都帶有一個標籤和一個圖像。當一個元素被選中時（通過應用選定的類，顯示標籤，否則它是隱藏的。其中一個元素的標籤寬度太長，我在這種情況下看到的是左邊的文本標籤邊界的邊界，它出現在它上面的圖像的中心

我想要做的是居中文本並使用溢出來顯示整個事情：基本上，左右溢出。 ？可能沒有切緣陰性打即可以我有一個解決方案，適用於任何標籤是任何長度工作

這裏的標記：

<ul> 
    <li class="selected"> 
    <a href="#"> 
     <img /> 
    </a> 
    <p class="label">Entertainment</p> 
    </li> 
</ul> 

而這裏的相關CSS：

ul li { display: inline-block; width: 100px; text-align:center; } 
ul li a { width: 100px; } 
.label { overflow: visible; display:none; } 
.selected .label { display: block; } 

Answer 1

我不認爲有一種方法可以做你想做的......但是，如果你的佈局允許的情況下，我建議增加你「禮的寬度'元素，所以你將有足夠的空間讓你的標題適當居中。

這裏有一個小提琴，可以幫助直觀什麼，我想說：

http://jsfiddle.net/3AsxH/1/

同樣，我從你的.label類中刪除overflow: visible;通知;沒有必要定義它，因爲在同一個聲明中有display: none;屬性。

順便說一句，當我把你的代碼複製到jsfiddle中，並且使標籤變長時，文本被包裹......是不可接受的？如果你希望你的標題顯示在一行中，我會建議上述步驟。