html - 使某些元素可能消失的菜单居中

Question

我正在尝试做的事情:我正在尝试将一些文本(区域名称)居中。此文本将具有 3 种不同的配置:

1. 文本和向右浮动箭头
2. float 左箭头文本和 float 右箭头
3. 向左浮动箭头和文字

这些箭头指向下一个区域或上一个区域，如果没有下一个或上一个区域箭头消失，但文本仍然显示当前区域名称。

问题:当箭头消失或显示其中心相应地移动时，该文本根本不会保持居中

我尝试了很多不同的方法来完成这个，但都失败了，这似乎是一个很简单的问题，但我想不通。

以下是我在 JSfiddle 中尝试的一些测试:链接:http://jsfiddle.net/5vTE5/

<ul style="text-align: center; list-style:none;">
    <li style="float:left; display:inline">
        Left float
    </li>
        <li style="display:inline;">
        Centered
    </li>
        <li style="float:right; display:inline">
        Right
    </li>
</ul>
<br/>

<div style="text-align: center;">
<span style="float: left;">Left text</span>
<span style="text-align: center;">Centered Text</span>
<span style="float: right;">Right Text</span>
</div>
<!--Right is gone-->
<div style="text-align: center;">
<span style="float: left;">Left text</span>
<span style="text-align: center;">Centered Text</span>
</div>

<!--left is gone-->

<div style="text-align: center;">
<span style="text-align: center;">Centered Text</span>
<span style="float: right;">Right Text</span>
</div>

<br/>
<!--This text is centered to the size of the window, or its parent-->
<div style="text-align: center;">Centered Text</div>

图片:

图片很窄，所以我也将它们上传到 imgur 以使其更显眼: http://imgur.com/a/WsC7V

目前我正在做一个列表。

谢谢，

凯文

Answer 1

您可以在不显示左右元素的页面中保留您的结构。示例 http://jsfiddle.net/CtKgr/2/CSS

li
{
    width:33%;
    border:1px solid red;
    list-style-type: none;
    display:inline-block;
    width:33%;
    float:left;
    height:50px;
    line-height:50px;
}

.center
{
    text-align:center;   
}

.right
{
    text-align:right;   
}

HTML

<ul>
    <li>
        Left
    </li>
    <li class="center">
        Centered
    </li>
    <li class="right">
        Right
    </li>
</ul>

<ul>
    <li>
    </li>
    <li class="center">
        Centered
    </li>
    <li class="right">
        Right
    </li>
</ul>


<ul>
    <li>
        Left float
    </li>
    <li class="center">
        Centered
    </li>
    <li class="right">

    </li>
</ul>