How To Float Elements Left Or Right Of A Horizontally Centered Element?

Question

For the pagination I'd like to use a horizontal alignment of elements looking like this: | | | page X of N | |

Solution 1:

HTML table

Basically, use a table with 3 columns. Add a fixed-width wrapper to the left and right columns, aligned towards the middle column.

JSFiddle Demo

The demo shows a variety of pagination bars, with balanced and unbalanced links to the left and right of the page X of N link. To make it a little more obvious what's happening, background colors have been added to different elements.

Key points:

Use a table with 3 columns. Give the middle column a small fixed width, and don't specify a width for the left and right columns. The middle column will expand as needed to fit its content, and any leftover space will be split evenly between the left and right columns.
Add a wrapper element inside the left and right columns. Give the wrapper a fixed width that's large enough to fit the largest amount of content it would ever have (but that will also fit within the smallest screen size supported). The wrappers must have the same width, or the middle column won't be centered.
Align the left column to the right, and the right column to left (so both are aligned towards the middle).
Align the contents of the left wrapper to the right, and the right wrapper to the left (so the contents of both are aligned towards the middle).
Place the centered page X of N link in the middle column.
Place any links that appear to the left of page X of N in the left-column content wrapper, and likewise place any links that appear to the right in the right-column content wrapper.

HTML

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
                <span>right</span>
            </div>
        </td>
    </tr>
</table>

CSS

.pagination {
    width: 100%;
}

.pagination .column1 {
    text-align: right;
}
.pagination .column2 {
    width: 1px;
}
.pagination .column3 {
    text-align: left;
}

.pagination .content {
    display: inline-block;
    width: 200px;
}
.pagination .column1 .content {
    text-align: right;
}
.pagination .column3 .content {
    text-align: left;
}

.pagination span {
    display: inline-block;
    height: 20px;
    white-space: nowrap;
}

Solution 2:

Elements are not attached to the centered element because you are floating them to left/right border. As much as I understood, in order to achieve what you want, you should lose the float and center the whole ul.

Solution 3:

Don't float anything, just set the outer/parent element to text-align: center

like this:

<ul style="margin:0;  text-align:center;">
        <li style="display:inline-block;">  outer left  </li>
        <li style="display:inline-block;">  inner left  </li>
        <li style="display:inline-block;">  always centred  </li>
        <li style="display:inline-block;">  outer right  </li>
        <li style="display:inline-block;">  inner right  </li>
    </ul>

Fiddle: http://jsfiddle.net/LMZsL/

Solution 4:

try position:absolute for col1, 2, 4 and 5 with left and right % ?

Solution 5:

I found another, quite simple solution: Centre everything and just hide the elements as required: visibility: hidden:

<div style="text-align: center;">
    <span style="visibility: hidden;">  outer left  </span>
    <span>  inner left  </span>
    always centred
    <span>  inner right  </span>
    <span>  outer right  </span>
</div>

This results in:

|               <inner left> always centred <inner right> <outer right>   |
| <- left border                      |                   right border -> |
|                                   centre                                |

Html5 Dev