Question

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

如果它必须溢出容器，我怎样才能保持居中？

这是我的代码：

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

Answer 1

将min-width属性提供给#access。像这样：

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

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

溢出时文本不会在框内保持居中

1 个答案: