Geek Answers Handbook

Center the float button between the two float buttons (fluid sizes)

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

It looks like this:

jQuery buttons; need to center Button B

CSS is pretty simple at this point:

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

Note. Button A is located at the far end of the page, and button C is the rightmost. B should be in the middle (which is the idea, anyway).

I know there is no "center" value for float. And I read some other solutions to this problem. But most of them involve setting a certain width in the wrapper div, which is not an ideal solution, for example, for a liquid layout. If you need to wrap a button, I'm not sure how this is better than using direct positioning.

In any case, I am looking for a solution using a fluid layout approach.

, .

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

. .

+5
5

, text-align: center; B?

( , , display: inline-block; B)

+14

:

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

, .

, :

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

, text-align.

+4

HTML:

<div class="left">1</div>
<div class="right">3</div>
<div class="center">2</div>

CSS:

.left { float: left; }
.right {float: right; }
.center { margin-left: 50%; }
+1

display:table-cell . , , , , .

http://jsfiddle.net/bES7Q/

<div>
    <span>a</span>
    <span>b</span>
    <span>c</span>
</div>

div { width: 100%; display: table; }
span {
    border: 1px solid gray;
    display: table-cell;
    width: 1%;
}
span:nth-of-type(2) {
    width: 99%;
    text-align: center;
}
+1

I did this using the navigation buttons on my blog. I used to use xec solution . Here is a variant of the trick I'm using right now:

.button1, .button2, .button3
{
    width: 60px;
    height: 20px;
}
.button1
{
    /* float implies block display */
    float: left;
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+1);
}
.button2
{
    /* set block display to make width, height and auto margin work */
    display: block;
    margin: 0 auto;
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+2);
}
.button3
{
    /* float implies block display */
    float: right;
    background-image: url(http://dummyimage.com/60x20/fc0/000.gif&text=Button+3);
}

Demo

+1
source

More articles:


All Articles