Alinear elementos HTML horizontalmente en un div

Question

Tengo tres objetos HTML y quiero organizar el botón Anterior en el lado izquierdo, el botón Siguiente en el lado derecho y el espacio en el medio dentro de un contenedor div.

<PREVIOUS> |SPAN| <NEXT> 

HTML

<div> 
    <input type="button" value="Previous" id="btnPrevious"/> 
    <span id="spanStage">Stage 5</span> 
    <input type="button" value="Next" id="btnNext"/> 
</div> 

CSS

#btnPrevious 
{ 
    float:left; 
} 
#spanStage 
{ 
    font-weight:bold; 
    vertical-align:middle;  
} 
#btnNext 
{ 
    float:right; 
} 

Answer 1

Sólo tiene que añadir text-align: center a su envoltorio para establecer la alineación horizontal de todos los niños que no son flotantes/no-posicionado:

div{ 
    text-align:center; 
} 

<span> son elementos en línea por defecto. Por lo tanto, debe usar display:block en ellos y aplicarles un estilo adecuado, o simplemente modificar un poco el estilo de los elementos principales. Como no hay más niños que el <span> y el <button> s lo mejor con esta solución simple.

Tenga en cuenta que text-align:<value> se hereda del padre, por lo que si desea incluir algo más en su envoltorio, debe comprobar si text-align:center es correcto para usted. De lo contrario, use text-align:<value> en el elemento específico, donde value es left, right, center o justify.

JSFiddle Demo

Answer 2

Demo

Añadir la clase - line a todo el elemento de niños s que desee en una sola línea y listo .. !! .. que se que obedeciendo de alojarse en una línea !! ..

Este es el truco -

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

Answer 3

sólo Agregar a su css.

#btnPrevious,#spanStage,#btnNext { 
     width:33%; 
     display:inline-block; 
    } 

Answer 4

El estilo "display: flex" es una buena forma de hacer que estos elementos se encuentren en la misma línea. No importa qué tipo de elemento en el div. Especialmente si la clase de entrada es form-control, otras soluciones como bootstrap, inline-block no funcionarán bien.

Ejemplo:

<div style="display:flex; flex-direction: row; justify-content: center; align-items: center"> 
    <input type="button" value="Previous" id="btnPrevious"/> 
    <span id="spanStage">Stage 5</span> 
    <input type="button" value="Next" id="btnNext"/> 
</div> 

Más detalles acerca de display: Flex:

flex-dirección: fila, columna

justificar-contenido: flexionar-end, el centro, el espacio entre, espacio -alrededor

ALIGN- artículos: estiramiento, flexión de arranque, flex-end, centro de