headers - meta title html

alineando elementos en sus contenedores y los contenedores en la línea

Question

Tengo varios elementos que intento agrupar y luego centrarlos en la página como sigue:

                                         |
                                         |
              Username:                  |                 
              ________________           |                 IMG 1
              Password:                  |                 
              ________________           |                 IMG 2
                  login                  |
                                         |
                                         |

No quiero que el nombre de usuario y la contraseña estén centrados, aún así quiero que estén en el lado izquierdo de los cuadros de entrada.

En este momento se ve algo como esto:

                                         |
 Username                              IM|G 2  
                                         |                 
         _______________                 |                 IMG 1
         _______________             Pass|word:                 
                                         |                 
                  login                  |
                                         |
                                         |

Tengo IMG 1, el botón de inicio de sesión y la línea vertical en un buen lugar, pero la forma está por todas partes. He intentado jugar con muchas cosas diferentes para obtener el resto del formulario de inicio de sesión y el IMG 2 en el lugar correcto, pero estoy atascado. Aquí está el diseño básico de mi archivo html:

<div id="center-wrapper">
    <div id="img1">
        <img src="img1.png" />
    </div>
    <br>
    <div id="img2">
        <img src="img2.png" />
    </div>

    <div id="line"></div>

    <form id="form-wrapper" action="/login/" method="post" style="width:40%;">
    {% csrf_token %}
    {% for field in form %}
    <br>
        {% if field.errors %}
            <div class="form-group has-error">
                <label class="col-sm-2 control-label" for="id_{{ field.name }}">
                {{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field|attr:"class:form-control" }}
                    <span class="help-block">
                        {% for error in  field.errors %}{{ error }}{% endfor %}
                    </span>
                </div>
            </div>
        {% else %}
            <div class="form-group">
                <label class="col-sm-2 control-label" for="id_{{ field.name }}">{{ field.label }}</label>
                <div class="col-sm-10">
                    {{ field|attr:"class:form-control" }}
                    {% if field.help_text %}
                        <p class="help-block"><small>{{ field.help_text }}</small></p>
                    {% endif %}
                </div>
            </div>
        {% endif %}
        <br>
    {% endfor %}
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <br>
            <button type="submit" class="btn btn-primary" value="Log In">{% trans "Log In" %}</button><br>
            <br>Don''t have an account? <a href="/signup/">Sign Up</a>
        </div>
    </div>
    </form>
</div>

Mi botón está dentro de mi formulario, así que no estoy seguro de por qué ese se está centrando correctamente y el resto del formulario no. Además, el <br> no está poniendo IMG 2 en IMG 1. Mi CSS es este:

#center-wrapper {
    text-align: center;
    margin: auto;
    width: 60%;
    height: 100%;
}

#form-wrapper {
    width: 50%;
}

#img1 {
    height: 220px;
    width: 274px;
    background: none;
    z-index: 30;
    float: right;
    position: absolute;
    margin-top: 0;
}

#img2 {
    height: 85px;
    width: 274px;
    background: none;
    z-index: 30;
    float: right;
    position: absolute;
    margin-bottom: 0;
}

#line {
    height: 305px;
    width: 2px;
    background-color: #8a8a8a;
    top: 200px;
    left: 50%;
    z-index: 30;
    position: absolute;
}

No creo que mi pregunta sea muy difícil, pero he estado luchando por conseguir este formato durante tanto tiempo y ¡solo quiero algunas sugerencias! Estoy usando formularios Django, que son bastante difíciles de formatear (formateándolos con widgets-tweaks), pero no creo que eso deba importar para mover su posición.

Answer 1

Evite el uso de posiciones absolute para este tipo de diseños que romperán su vista en algún momento.

Sugiero el uso de otros métodos de CSS. Vea ejemplos de este fragmento si tiene más preguntas que puede hacer:

Pantalla - Tabla

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html,
body {
  height: 100%;
}
#center-wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
#center-wrapper > div {
  width: 50%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#center-wrapper > div:first-child {
  border-right: 2px solid red;
}
#form-wrapper {
  width: 70%;
  display: inline-block;
}
label,
input {
  width: 100%;
  text-align: left;
  display: block;
}

<div id="center-wrapper">
  <div>
    <form id="form-wrapper">
      <label>User</label>
      <input type="text">
      <label>Pass</label>
      <input type="text">
      <button type="submit" value="Log In">Log In</button>
    </form>
  </div>
  <div>
    <img src="http://placehold.it/200" />
    <img src="http://placehold.it/200" />
  </div>
</div>

Bloque en línea

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}
html,
body {
  height: 100%;
}
#center-wrapper {
  height: 100%;
  width: 100%;
}
#center-wrapper > div {
  width: 48%;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
#center-wrapper > div.line {
  width:2%;
  height:100%;
  background:purple;
}
#form-wrapper {
  width: 70%;
  display: inline-block;
}
label,
input {
  width: 100%;
  text-align: left;
  display: block;
}

<div id="center-wrapper">
  <div>
    <form id="form-wrapper">
      <label>User</label>
      <input type="text">
      <label>Pass</label>
      <input type="text">
      <button type="submit" value="Log In">Log In</button>
    </form>
  </div>
  <div class="line"></div>
  <div>
    <img src="http://placehold.it/200" />
    <img src="http://placehold.it/200" />
  </div>
</div>

_{Nota : Otros métodos como flex funcionarán también, pero esto aquí le dará una idea}

Answer 2

No es necesario usar la posición simplemente use eso, HTML

<form id="form-wrapper">
    <label for="username">
        Username:
        <input type="text" name="username">
    </label>
    <br>
    <label for="password">
        Password:
        <input type="text" name="password">
    </label>
    <br>
    <button type="submit" value="Log In">Login</button>
</form>

<div id="imgs">
    <img src="img1.png" alt="Img 1" />
    <br>
    <img src="img2.png" alt="Img 2" />
</div>

Solo cambio un código tuyo. CSS

#center-wrapper {
  margin: auto;
  width: 60%;
  padding-top: 50px;
}
#form-wrapper{
  border-right: 2px dashed gray;
}
#form-wrapper, #imgs {
  width: 49.5%;
  float: left;
  height: 200px;
  padding-top: 50px;
  text-align: center;
}
  #form-wrapper input{
  border: none;
}
#form-wrapper label{
  border-bottom: 1px solid;
}
button {
  border: none;
  background: none;
}