Centering a menu where some items may disappear

Question

What I am trying to do: I am trying to center some text (an areas name). this text will have 3 different configurations:

1. Text and a floating right arrow
2. Floating left arrow text and floating right arrow
3. Floating left arrow and text

These arrows go to the next area or previous area, if there is no next or previous area the arrow disappears, but the text still shows the current areas name.

Problem: This text simply wont stay centered when the arrows disappear or appear its center shifts over accordingly

I have tried many different ways of accomplishing this and all of which have failed, it seems to be a simple enough problem, but I can't figure it out.

Here are some tests I tried in JSfiddle: Link: 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>

Images:

The images are narrow so I have also uploaded them to imgur to make them a bit more visible: https://i.sstatic.net/dpjqO.jpg

Currently I am doing it with as a list.

Thanks,

Kevin

Answer 1

You could keep your structure in pages where the right, left elements are not displayed. Example 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>