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