Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center a floating button between two floating buttons (liquid dimensions)

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

It looks like this thus far:

jQuery buttons; need to center Button B

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.

like image 387
user717236 Avatar asked Jan 27 '12 22:01

user717236


2 Answers

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)

like image 109
xec Avatar answered Sep 20 '22 15:09

xec


My solution:

http://jsfiddle.net/UWNTM/1/

Hope it helps.

Basically, I used three wrappers for elements:

.button_wrapper {
    float: left;
    width: 33%;
}

And then placed button inside them using inline text-align property.

like image 27
lorenzo-s Avatar answered Sep 22 '22 15:09

lorenzo-s