Question

I’m having issues centering a floating button between two other floating buttons.

It looks like this thus far:

The CSS is pretty basic at this point:

A {
  float: left;
}
B {
  float: left;
}
C {
  float: right;
}

Note: Button A is positioned to the left-most extreme on a page and Button C is the right-most. B should be in the middle (that’s the idea, anyway).

I know there is no ‘center’ value for float. And I have read some other solutions for this problem. But most of them involve setting a specific width in a wrapper div, which not an ideal solution, imo, for a liquid layout design. If you have to wrap the button, I’m not sure how that’s any better than using straight positioning.

Either way, I’m looking for a solution using a liquid layout approach.

I also tried the following but it did not work.

B {
  position: relative;
  left: 0;
  right: 0;
}

Any help would be most appreciated. Thank you very much.

Answer 1

How about if you put text-align: center; on their container and don’t float B at all?

(I’m assuming it is an inline element, if not also do display: inline-block; on B)