How to float elements left or right of a horizontally centered element?

问题

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

|<first page> | <previous page> | page X of N | <next page> | <last page>|

The element page X of N should always stay in the middle of the whole line, even if one of the other elements is missing. E.g.

|<first page> | <previous page> | page N of N                            |

The floating elements should always be attached directly to the element in the centre.

My approach looks like this (last row of a search results table):

<tr colspan="4"><td class="pager">
    <ul style="margin:0;">
        <li style="display:inline-block; float:left;">  outer left  </li>
        <li style="display:inline-block; float:left;">  inner left  </li>
        <li style="display:inline-block; float:none; text-align:center; position:absolute; left:50%; width:100px; margin-left:-50px;">  always centred  </li>
        <li style="display:inline-block; float:right;">  outer right  </li>
        <li style="display:inline-block; float:right;">  inner right  </li>
    </ul>
</td></tr>

But the result looks like this, i.e. the floating elements are not "attached" to the centred element:

|<first page> | <previous page> |          page X of N            | <next page> | <last page>|
|<-- (left border)                                                         (right border) -->|

回答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;
}

回答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.

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

回答4:

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

回答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                                |

来源：https://stackoverflow.com/questions/17134067/how-to-float-elements-left-or-right-of-a-horizontally-centered-element

标签

html

css

css-float

alignment