How can I center floated elements in CSS when building a pagination component?

General Discussions
, ,
1

I’m building a pagination UI and want to center all the page links, but I’m running into issues with CSS. Each link needs to be display: block and floated (for layout reasons), but using text-align: center on the parent doesn’t seem to affect floated elements.

Here’s a simplified version of my code:

.pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(…); }

I’ve tried using padding and margins, but since the number of links varies per page, that doesn’t give consistent results. Is there a clean way to float elements and still center them, maybe using inline-block or flexbox?

What’s the most reliable technique for achieving CSS float center behavior for layouts like this?

2

This is a classic issue! I’ve run into this exact challenge when building pagination UIs for dashboards. The thing with floated elements is that they ignore text-align: center, so you need a workaround.

A neat solution here is to wrap the floated elements in another container and then center that container. It’s pretty simple and one of the oldest tricks that still works well.

Here’s how you can do it:

<div class="pagination">
  <div class="pagination-inner">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    ...
  </div>
</div>

.pagination {
  text-align: center;
}
.pagination-inner {
  display: inline-block;
}
.pagination a {
  float: left;
  width: 30px;
  height: 30px;
  margin-left: 3px;
  display: block;
}

By using inline-block on .pagination-inner, it’s centered using text-align: center on .pagination. It’s an old-school yet reliable way to achieve CSS float center behavior without overcomplicating things.

3

Totally agree! I used to wrestle with floats for pagination too, but once I made the switch to Flexbox, things became so much easier. No more dealing with clearfixes or weird centering hacks. Flexbox makes centering a breeze, and it’s perfect for layouts like pagination.

Here’s how you can update your code using Flexbox for that CSS float center feel:

.pagination {
  display: flex;
  justify-content: center;
  gap: 6px; /* replaces margin-left */
}
.pagination a {
  width: 30px;
  height: 30px;
  display: block;
  background: url(...);
}

Flexbox automatically centers the items with justify-content: center, and the gap property replaces the need for manual margins between the links. If you’re not tied to using floats for legacy reasons, this is definitely the modern and more intuitive way to handle centering without the hassle!

4

I hear you , sometimes, we really don’t have the luxury of ditching floats, whether it’s due to legacy code or a specific rendering requirement. In that case, there’s a trick I’ve used for centering floated elements that still mimics the CSS float center behavior quite effectively. It involves absolute positioning and a little transformation.

Here’s the trick:

<div class="pagination">
  <div class="pagination-inner">
    <a href="#">1</a>
    <a href="#">2</a>
    ...
  </div>
</div>

.pagination {
  position: relative;
}
.pagination-inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* Keeps links in a line */
}
.pagination a {
  float: left;
  width: 30px;
  height: 30px;
  margin-left: 3px;
}

By setting .pagination-inner to position: absolute and using transform: translateX(-50%), it offsets the floated elements and centers the entire group. It’s a bit more complex to maintain, but it can be a lifesaver when you’re stuck with CSS float center requirements.