Tengo problemas para centrar un botón flotante entre otros dos botones flotantes.Centrar un botón flotante entre dos botones flotantes (dimensiones de líquido)

Parece que este hasta el momento:

jQuery buttons; need to center Button B

El CSS es bastante básico en este punto:

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

Nota: El botón A se coloca a la izquierda más extrema en una la página y el botón C es el más correcto. B debería estar en el medio (esa es la idea, de todos modos).

Sé que no hay un valor de 'centro' para el flotador. Y he leído algunas otras soluciones para este problema. Pero la mayoría de ellos implica establecer un ancho específico en un envoltorio div, que no es una solución ideal, imo, para un diseño de diseño líquido. Si tiene que ajustar el botón, no estoy seguro de cómo es mejor que usar el posicionamiento directo.

De cualquier manera, estoy buscando una solución con un enfoque de diseño líquido.

También intenté lo siguiente pero no funcionó.

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

Cualquier ayuda sería muy apreciada. Muchas gracias.

Fuente

2012-01-27 user717236

Los botones A y B son correctas como son; ¿es tu intención poner el botón B en el medio? No creo que se vea bien. ¿Por qué no simplemente flotar el botón C a la izquierda? –

Sí, gracias. Mi intención es poner el botón B en el medio. Debería haber especificado que la imagen de arriba es el ancho de una página. Por favor, permítame rehacerlo. – user717236

Creo que mi respuesta será la misma; deberías poner tus botones en su div y flotarlos todos a la izquierda. –

¿Qué tal si pones text-align: center; en su contenedor y no flotas B en absoluto?

(estoy asumiendo que es un elemento en línea, si no también hacer display: inline-block; en B)

Fuente

2012-01-27 22:34:48 xec

+1 Funciona http://jsfiddle.net/xNBxQ/1/ - Nice One –

** + 1 ** Seguramente mejor que el mío :) –

¡Gracias! ¡Gracias! ¡Gracias! ¡Hombre! – inser

Mi solución:

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

espero que ayude.

Básicamente, he usado tres contenedores para elementos:

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

Y luego el botón colocado dentro de ellos utilizando inline text-align propiedad.

Fuente

2012-01-27 22:36:33

Podría usar 33%, 34%, 33%. –

prueba este código HTML:

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

con este código CSS:

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

Fuente

2012-01-27 22:36:36

Se puede usar para este display:table-cell. Aunque creo que otras respuestas son probablemente mejores, es bueno tener soluciones alternativas.

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; 
}

Fuente

2012-01-27 22:40:56 mrtsherman

Lo hice con botones de navegación blogger. He usado xec's solution anteriormente.Aquí es una variante del truco que estoy usando en este momento:

.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

Fuente

2012-01-30 10:30:25

Centrar un botón flotante entre dos botones flotantes (dimensiones de líquido)

Respuesta

Demo

Cuestiones relacionadas