文本將不會居中居中在框溢出

我似乎無法使文本保持集中在容器中，如果它溢出該容器。在我的例子中，它是流體佈局中的水平菜單。它工作正常，直到瀏覽器窗口足夠收縮，文本溢出。一旦發生這種情況，它不再居中，而只是重疊在右邊。文本將不會居中居中在框溢出

即使需要溢出其容器，我該如何保持居中？

這裏是我的代碼：

<style type="text/css"> 

#access { 
    background: #e2e2e2; 
    width: 100%; 
    margin-left:auto; 
    margin-right:auto; 
} 

#access div { 
    width: 100% 
    margin-left:auto; 
    margin-right:auto; 
} 

#access ul { 
    font-size: 0.9em; 
    list-style: none outside none; 
    display: inline-block; 
    width: 100%; 
    text-align: center; 
} 

#access li { 
    width: 15%; 
    position: relative; 
    margin-right: 1%; 
    float: left; 
} 

#access a { 
    color: #fff; 
    width: 62%; 
    margin-left:auto; 
    margin-right:auto; 
    background: #CB2027; 
    display: inline-block; 
    line-height: 2.2em; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    font-size: 1.2em; 
    padding: 0px 1em; 
    white-space: nowrap; 
} 
</style> 
<nav id="access" role="navigation"> 

<div class="menu-test-menu-container"><ul id="menu-test-menu" class="menu"> 
<li id="menu-item-29"><a href="http://google.com/">Home</a></li> 
<li id="menu-item-30"><a href="http://google.com/">Item 1</a></li> 
<li id="menu-item-31"><a href="http://google.com/">Long item</a></li> 
<li id="menu-item-32"><a href="http://google.com/">Item 3</a></li> 

</ul></div></nav>

這裏，它是活的：http://jsfiddle.net/Psymz/

來源

2013-03-05 James

給min-width屬性#access。事情是這樣的：

#access{ 
    min-width: 1024px; /* low resolution value */ 
}

Working Fiddle（窗口大小調整至檢查）

來源

2013-03-05 12:35:27

謝謝你 - 但有可能解決這個同時仍然允許#access來調整，以保持流動佈局？ – James 2013-03-05 12:40:14

@james以百分比給予一切，包括填充，邊距......這就是我的想法。讓我檢查一下。 – 2013-03-05 12:41:47

@james如果不是'＃access'，你應該至少給予'min-width'到'li'。還可以使用'word-wrap：break-word;'而不是'white-space：nowrap;'，這可以幫助你一些。 – 2013-03-05 12:49:37

文本將不會居中居中在框溢出

回答

相關問題