title: How to float elements left or right of a horizontally centered element?
body: <p>For the pagination I'd like to use a horizontal alignment of elements looking like this:</p>
  
  <pre><code>|&lt;first page&gt; | &lt;previous page&gt; | page X of N | &lt;next page&gt; | &lt;last page&gt;|
  </code></pre>
  
  <p>The element <code>page X of N</code> should always stay in the middle of the whole line, <strong>even if one of the other elements is missing</strong>. E.g.</p>
  
  <pre><code>|&lt;first page&gt; | &lt;previous page&gt; | page N of N                            |
  </code></pre>
  
  <p>The floating elements should always be attached directly to the element in the centre.</p>
  
  <p>My approach looks like this (last row of a search results table):</p>
  
  <pre><code>&lt;tr colspan="4"&gt;&lt;td class="pager"&gt;
      &lt;ul style="margin:0;"&gt;
          &lt;li style="display:inline-block; float:left;"&gt;  outer left  &lt;/li&gt;
          &lt;li style="display:inline-block; float:left;"&gt;  inner left  &lt;/li&gt;
          &lt;li style="display:inline-block; float:none; text-align:center; position:absolute; left:50%; width:100px; margin-left:-50px;"&gt;  always centred  &lt;/li&gt;
          &lt;li style="display:inline-block; float:right;"&gt;  outer right  &lt;/li&gt;
          &lt;li style="display:inline-block; float:right;"&gt;  inner right  &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>But the result looks like this, i.e. the floating elements are not "attached" to the centred element:</p>
  
  <pre><code>|&lt;first page&gt; | &lt;previous page&gt; |          page X of N            | &lt;next page&gt; | &lt;last page&gt;|
  |&lt;-- (left border)                                                         (right border) --&gt;|
  </code></pre>