Alinear texto CSS/HTML

Este es mi HTML y CSS

.register {
  background-color: red;
  width: 500px;
  float: left;
}

.login {
  background-color: blue;
  width: 500px;
  float: left;
}

.log {
  text-decoration: none;
  font-family: 'Mulish', sans-serif;
  font-size: 20px;
  color: #fff;
}

<div class="submissions">
          <div class="register"><a class="log" href="" style="margin-right: 100px;">Register</a></div>
          <div class="login"><a class="log" href="" style="margin-left: 100px;">Login</a></div>
</div>

Y el texto de inicio de sesión se alinea de hecho 100 px con el margen derecho, pero el texto de registro no se alinea 100 px con el margen derecho, ¿cómo puedo solucionar este problema? Imagen que se muestra a continuación (se utilizaron divs de color rojo y azul para una visualización más sencilla).

Si desea que el texto de registro tenga un espacio en el lado izquierdo similar al de inicio de sesión, debe usar el margen izquierdo y no el margen derecho

- Zam Abdul Vahid

marzo28, 2021 a las 2:17

¿Por qué no tener un margen correcto? Si uso el margen izquierdo no sabré si ambos están alineados correctamente.

-neptuno17

28 de marzo de 2021 a las 2:20

margin-right: 100px crea un espacio de 100px después del texto del registro. Entonces, si agrega otro <a> etiqueta verías ese espacio. ¿Cómo quieres que se alineen ambos textos?

- Zam Abdul Vahid

28 de marzo de 2021 a las 2:24

Prueba esto: .register .log { text-align: right; bloqueo de pantalla; }

-DLL

28 de marzo de 2021 a las 5:08

------------------------------------

margin-right no garantiza que el elemento estará a una cierta distancia del lado derecho de su padre, solo determina el espacio mínimo reservado por el elemento en su lado derecho.

Compruébelo usted mismo: el elemento rojo aquí está a más de 10 píxeles de la derechalado de su div padre.

.container {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.child {
  width: 20%;
  height: 50px;
  margin-right: 10px;
  background-color: red;
}

<div class="container">
  <div class="child"></div>
</div>

Si desea que el elemento mida desde el lado derecho en lugar del izquierdo, puede usar la propiedad flotante.

.container {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.child {
  width: 20%;
  height: 50px;
  float: right;
  margin-right: 10px;
  background-color: red;
}

<div class="container">
  <div class="child"></div>
</div>

¿Ves cómo el elemento rojo ahora está en el lado derecho de su contenedor principal? Ahora está exactamente a 10 píxeles del borde porque todavía reserva ese espacio usando su margen derecho.

El uso de flotante es menos común hoy en día porque existen mejores formas de crear la mayoría de los diseños. Sin embargo, para usos simples como este, podría ser la solución rápida que estás buscando.

Aquí está su código con la propiedad flotante ajustada. He seleccionado la opción "Registrarse" enlace usando el selector compuesto .register > a que coincide con una etiqueta de anclaje (a) que es hijo directo de un elemento con el registroatributo de clase ter.

.register {
  background-color: red;
  width: 500px;
  float: left;
}
  .register > a {
    float: right;
  }

.login {
  background-color: blue;
  width: 500px;
  float: left;
}

.log {
  text-decoration: none;
  font-family: 'Mulish', sans-serif;
  font-size: 20px;
  color: #fff;
}

<div class="submissions">
  <div class="register"><a class="log" href="" style="margin-right: 100px;">Register</a></div>
  <div class="login"><a class="log" href="" style="margin-left: 100px;">Login</a></div>
</div>

1

Oh, ya se me ocurrió la idea y funcionó muy bien, ¡gracias!

-neptuno17

28 de marzo de 2021 a las 2:26

------------------------------------

Lo que entiendo por tu pregunta es que estás buscando lograr algo similar a esta captura de pantalla

Para lograr esto, simplemente puse text-align: justo en el archivo .register cla.ss.

Código completo:

.register {
  background-color: red;
  width: 500px;
  float: left;
  text-align: right; //The only change
}

.login {
  background-color: blue;
  width: 500px;
  float: left;
}

.log {
  text-decoration: none;
  font-family: 'Mulish', sans-serif;
  font-size: 20px;
  color: #fff;
}

<div class="submissions">
  <div class="register"><a class="log" href="" style="margin-right: 100px;">Register</a></div>
  <div class="login"><a class="log" href="" style="margin-left: 100px;">Login</a></div>
</div>

Pruebe la versión de 'página completa'.

Respondido

28 de marzo de 2021 a las 3:27 p.m.

Anirudh Giran

Anirudh Giran

55

1

1 insignia de plata

6

6 insignias de bronce