CODEWITHSUNDEEP
htmlcsscss-floatalignment
rantanplan
rantanplan

Reputation: 422

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

Upvotes: 3

Views: 2178

Answers (5)

rantanplan
rantanplan

Reputation: 422

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                                |

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

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

Upvotes: 4

Dave Driesmans
Dave Driesmans

Reputation: 819

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

Upvotes: 0

jackJoe
jackJoe

Reputation: 11158

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/

Upvotes: 0

Misa Lazovic
Misa Lazovic

Reputation: 2823

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.

Upvotes: 0

Related Questions