溢出时文本不会在框内居中答案

【问题标题】：Text won't stay centered within box on overflow溢出时文本不会在框内居中
【发布时间】：2013-03-05 21:02:03
【问题描述】：

如果文本溢出容器，我似乎无法让文本保持居中。在我的示例中，它是流体布局中的水平菜单。在浏览器窗口缩小到足以使文本溢出之前，它可以正常工作。一旦发生这种情况，它就不再居中，而是仅在右侧重叠。

我怎样才能让它保持居中，即使它不得不溢出它的容器？

这是我的代码：

<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/

【问题讨论】：

标签： css overflow centering fluid

【解决方案1】：

将min-width 属性赋予#access。像这样的：

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

Working Fiddle（调整窗口大小以检查）

【讨论】：

谢谢 - 但是否有可能在允许 #access 调整大小以保持流畅布局的同时解决这个问题？
@james 以百分比形式给出所有内容，包括填充、边距……这就是我的想法。让我检查一下。
@james 你至少应该把min-width 给li，如果不是#access。并且还使用word-wrap: break-word; 而不是white-space: nowrap;，这可以帮助你一些。
@James 检查此fiddle。我不确定是否支持跨浏览器。
@james 很高兴您自己解决了问题。 :) （不知道你是怎么做到的，但min-width 在调整大小时以百分比表示没有任何意义..）