title: How do I center floated elements?
body: <p>I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, <code>text-align: center;</code> doesn't work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn't work. Here's my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pagination {
    text-align: center;
  }
  .pagination a {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin-left: 3px;
    background: url(/images/structure/pagination-button.png);
  }
  .pagination a.last {
    width: 90px;
    background: url(/images/structure/pagination-button-last.png);
  }
  .pagination a.first {
    width: 60px;
    background: url(/images/structure/pagination-button-first.png);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='pagination'&gt;
    &lt;a class='first' href='#'&gt;First&lt;/a&gt;
    &lt;a href='#'&gt;1&lt;/a&gt;
    &lt;a href='#'&gt;2&lt;/a&gt;
    &lt;a href='#'&gt;3&lt;/a&gt;
    &lt;a class='last' href='#'&gt;Last&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- end: .pagination --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To get the idea, what I want:</p>
  
  <p><img src="https://i.stack.imgur.com/XYZzC.jpg" alt="alt text"></p>