1

Automáticamente me salen los botones uno debajo del otro al repartirlos en 3 divs.

Cada botón tiene su propio div y a su vez todos los divs están en un div llamado botones.

¿Cómo puedo repartir los tres botones en un ancho X centrados? Sin que ocupen todo el ancho de la página pero sí un 60% o 70% de la página y centrados con un espacio entre cada botón de 10 px (padding).

<div class="botones">
    <!-- Botón NUEVA cabaña -->
    <div class="boton_anadir_cabana" class="table-responsive" align="left">
        <font face="verdana">
            <b><input type="button" style="width:200px; height:28px;" name="nueva_cabana" id="nueva_cabana" value="Añadir cabaña" /></b>
        </font>
    </div>

    <!-- Botón ELIMINAR cabaña/s -->
    <div class="boton_eliminar" class="table-responsive" align="left">
        <font face="verdana">
            <b><input type="submit" style="width:200px; height:28px;" name="eliminar_cabanas" id="eliminar_cabanas" value="Eliminar cabañas" /></b>
        </font>
    </div>

    <!-- Botón NUEVO accesorio -->
    <div class="boton_anadir_accesorio" class="table-responsive" align="left">
        <font face="verdana">
            <b><input type="button" style="width:200px; height:28px;" name="nuevo_accesorio" id="nuevo_accesorio" value="Añadir accesorio" /></b>
        </font>
    </div>
</div>

CSS:

.botones{
    width: 70%;
    float:left;
    margin: auto;
    padding: 20px;
}

Captura del croquis:

introducir la descripción de la imagen aquí

1 respuesta 1

2

Puedes utilizar flex-box, por ejemplo:

.button-container {
    margin: 0 auto;
    padding: 5px; 0;
    width: 50%;
    border: thin solid gray;
    display: flex;
    justify-content: space-around;
}
<div class="button-container">
    <input type="button" name="name" value="Button1" />
    <input type="button" name="name" value="Button2" />
    <input type="button" name="name" value="Button3" />
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.