Style HTML CSS buttons

Question

Style HTML CSS buttons

Navigation

#1 by (2 votes)

1

I automatically get the buttons one below the other by dividing them into 3 divs.

Each button has its own div and in turn all divs are in a div called > buttons .

How can I distribute the three buttons in a centered X width? Without occupying the entire width of the page but 60% or 70% of the page and centered with a space between each 10 px button (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;
}

Capture the sketch:

html css div

asked by omaza1990 07.01.2018 в 00:48

source

1 answer

Show character frequency in a string Center the DIV but not the elements

score 2 · Accepted Answer

You can use flex-box, for example:

.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>