Center the DIV but not the elements

1

I want to center the DIV in the middle of the page , which I do, but I do not want to center ALL the elements. I want the elements to have a vertical alignment (name, description, price).

Only Name and Image are at the same level, others are not respected.

Code:

     <div class="formulario_cabana">
            <form action="<?php echo $_SERVER['PHP_SELF'];?>" enctype="multipart/form-data" name="anadir_cabana" id="anadir_cabana" method="POST" onsubmit="return validar_formulario_cabana();">
                <label for="nombre">Nombre: </label>
                    <input type="text" id="nombre" name="nombre" />
                &nbsp;&nbsp;&nbsp;
                <label for="capacidad">Capacidad: </label>
                    <?php
                    echo "<select name='capacidad'>";
                    for($i=1; $i<11; $i++){
                        if($i==1){
                            echo "<option value='$i' selected='selected'>$i</option>";
                        }else{
                            echo "<option value='$i'>$i</option>";
                        }
                    }
                    echo "</select>";
                    ?>
                <br/><br/>
                <label for="descripcion">Descripción: </label>
                    <input type="text" id="descripcion" name="descripcion" />
                <br/><br/>
                <label for="precio">Precio: </label>
                    <input type="text" id="precio" name="precio" onkeypress="return soloNumeros(event);" />
                <br/><br/>

                <b>Accesorios:</b><br/>
                <label for="secador">Secador:</label>
                <input type="checkbox" id="secador" name="accesorios[]" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="calefaccion">Calefaccion: </label>
                <input type="checkbox" id="calefaccion" name="accesorios[]" value="2" />
                <br/><br/>
                <label for="jacuzzi">Jacuzzi: </label>
                <input type="checkbox" id="jacuzzi" name="accesorios[]" value="3" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="tv">TV: </label>
                <input type="checkbox" id="tv" name="accesorios[]" value="4" />
                <br/><br/>
                <label for="internet">Internet: </label>
                <input type="checkbox" id="internet" name="accesorios[]" value="5" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <label for="microondas">Microondas: </label>
                <input type="checkbox" id="microondas" name="accesorios[]" value="6" />

                <br/><br/>
                <!-- Subir imagen cabaña -->
                <label for="imagen">Imagen:</label>
                    <input type="file" name="imagen" id="imagen" /> <!-- multiple="multiple" -->
                <br/><br/>

                <input type="submit" value="Guardar" id="guardar_cabana" name="guardar_cabana" /> &nbsp;&nbsp;&nbsp;
                <input type="reset" value="Resetear" id="resetear" name="resetear" />
            </form>
        </div>

CSS Code:

.formulario_cabana{
    text-align: center;
}
    
asked by omaza1990 07.01.2018 в 10:06
source

1 answer

2

For what you comment, it would be best to use a div container to set the alignment of div that you want to center.

In the div container you set text-align: center to center the div internal.

In the div internal set text-align: left so that the texts are aligned to the left side.

To separate the text 10 pixels from the edge of div use the property padding : padding: 10px .

In the following example I have also added a border to the internal% div so that the effect is better seen.

.container{
  text-align: center;
}
.formulario_cabana{
    text-align: left;
    display: inline-block;
    padding: 10px;
    
    border: solid 1px #cccccc;
}
<div class="container">
  <div class="formulario_cabana">
    <form action="" enctype="multipart/form-data" name="anadir_cabana" id="anadir_cabana" method="POST" onsubmit="return validar_formulario_cabana();">
        <label for="nombre">Nombre: </label>
            <input type="text" id="nombre" name="nombre" />
        &nbsp;&nbsp;&nbsp;
        <label for="capacidad">Capacidad: </label>
            <select name='capacidad'>
               <option value='1' selected='selected'>1</option>";
               <option value='2'>2</option>
            </select>
        <br/><br/>
        <label for="descripcion">Descripción: </label>
            <input type="text" id="descripcion" name="descripcion" />
        <br/><br/>
        <label for="precio">Precio: </label>
            <input type="text" id="precio" name="precio" onkeypress="return soloNumeros(event);" />
        <br/><br/>

        <b>Accesorios:</b><br/>
        <label for="secador">Secador:</label>
        <input type="checkbox" id="secador" name="accesorios[]" value="1" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="calefaccion">Calefaccion: </label>
        <input type="checkbox" id="calefaccion" name="accesorios[]" value="2" />
        <br/><br/>
        <label for="jacuzzi">Jacuzzi: </label>
        <input type="checkbox" id="jacuzzi" name="accesorios[]" value="3" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="tv">TV: </label>
        <input type="checkbox" id="tv" name="accesorios[]" value="4" />
        <br/><br/>
        <label for="internet">Internet: </label>
        <input type="checkbox" id="internet" name="accesorios[]" value="5" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label for="microondas">Microondas: </label>
        <input type="checkbox" id="microondas" name="accesorios[]" value="6" />

        <br/><br/>
        <!-- Subir imagen cabaña -->
        <label for="imagen">Imagen:</label>
            <input type="file" name="imagen" id="imagen" /> <!-- multiple="multiple" -->
        <br/><br/>

        <input type="submit" value="Guardar" id="guardar_cabana" name="guardar_cabana" /> &nbsp;&nbsp;&nbsp;
        <input type="reset" value="Resetear" id="resetear" name="resetear" />
    </form>
  </div>
</div>
    
answered by 07.01.2018 / 12:11
source