1

Deseo centrar el DIV en mitad de la página, cosa la cual lo realiza, pero no deseo centrar TODOS los elementos. Quiero que los elementos tengan una alineación vertical (nombre, descripcion, precio).

Únicamente está al mismo nivel Nombre y Imagen, los demás no se respetan.

Código:

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

Código CSS:

.formulario_cabana{
    text-align: center;
}
2
  • Esta pregunta se ha hecho ya antes (varias veces) y tiene respuesta. ¿Has intentado las soluciones ya ofrecidas? ¿Cómo no te funcionan?
    – Alvaro Montoro
    Commented el 7 ene. 2018 a las 9:19
  • He buscado pero no vi una pregunta similar a centrar el div y alinea contenido <labels> en un mismo margen vertical.
    – omaza1990
    Commented el 7 ene. 2018 a las 9:24

1 respuesta 1

2

Por lo que comentas lo mejor sería utilizar un div contenedor para establecer la alineación del div que quieres centrar.

En el div contenedor estableces text-align: center para que se centre el div interno.

En el div interno estableces text-align: left para que los textos se alineen al lado izquierdo.

Para separar el texto 10 píxels del borde del div utiliza la propiedad padding: padding: 10px.

En el siguiente ejemplo le he agregado además un borde al div interno para que se vea mejor el efecto.

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

2
  • El problema que con margin: auto, se me alinea el contenido sí, pero el div se situa en el margen izquierdo, no se me centra en la pantalla. Quiero que se centre el DIV pero que se alineen las etiquetas al margen izquierdo del DIV con un espacio padding de unos 10 px más o menos.
    – omaza1990
    Commented el 7 ene. 2018 a las 14:29
  • Vale, entiendo que si se te sitúa el div en el margen izquierdo es porque el display lo tienes establecido a inline o inline-block. Entonces la mejor solución que se me ocurre es establecer el text-align del padre del div a center. El padding lo conseguirías simplemente estableciendo el valor de esta propiedad al div. He modificado la respuesta para mostrar esta solución. Commented el 7 ene. 2018 a las 14:41

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.