Texto del centro HTML: cómo alinear verticalmente CSS una div

Programación

En el mundo de HTML y CSS, se trata de la estructura del diseño y la distribución de elementos. Por lo general, usamos HTML para definir el marcado y la estructura, mientras que CSS nos ayuda a manejar el estilo y la alineación de los elementos.

En esta publicación aprenderemos un poco sobre las diferentes formas en que podemos centrar elementos HTML y manejar la alineación vertical con CSS.

Primero vamos a aprender cómo alinear texto con CSS.

A continuación, cubriremos cómo alinear un div y cualquier otro elemento.

Y finalmente aprenderemos cómo podemos poner texto y un divjuntos dentro de un contenedor.

Cómo centrar el texto

Hay muchas formas de centrar el texto usando CSS.

Usando la propiedad Float

Flotar es una forma fácil de alinear texto.

Para colocar el texto en el lado derecho del diseño, simplemente podemos usarlo right  como un valor para float.

Para colocar el texto en el lado izquierdo, usamos left, como float:left. Mira el ejemplo de abajo:

 .right { float: right; } .left { float: left; } // HTML Right Left

Para centrar el texto usando float podemos usar margin-lefto margin-righty hacerlo   50%, como se muestra a continuación.

 .center { float: left; margin-left: 50%; } /* HTML*/ Center

Puede obtener más información sobre los usos de Floataquí.

Usando Text-align

text-alignes una forma más conveniente y específica de alinear texto. Nos permite colocar el texto al centero al lado lefto right, como muestra el siguiente ejemplo:

.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ 
Right
Center
Left

Más información sobre text-align.

Cómo alinear un div

Bueno, hay muchas formas de hacerlo.

De la misma manera que usamos Floatpara alinear texto, también podemos usarlo para alinear un divelemento.

Floathace el trabajo, pero CSS nos brinda mejores opciones que son más convenientes y elegantes. ¿Has oído hablar de Flexbox? ¿O css-grid?

Bueno, estos dos métodos proporcionan formas muy modernas de alinear y trabajar con su diseño en CSS. Veamos Flexbox con más detalle.

Flexbox  

Flexbox ofrece una forma fácil y directa de alinear un div, y es mi método favorito hasta ahora para manejar diseños en CSS (lo uso todos los días).

Veamos qué haríamos Flexboxpara ver cómo funciona recreando el mismo ejemplo anterior.

El ejemplo:

El código:

      Flexbox  .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div

vamos a analizarlo

  • Siempre definimos un div  padre usando display:flexpara aplicar Flexbox. Entonces, hacemos que todos los elementos secundarios de div dentro del padre divpuedan manejarse usando Flexboxpropiedades.
  • El   flex-directionusa la rowdirección por defecto, lo que significa que los elementos se colocarán verticalmente dentro del contenedor.
  • Con la justify-contentpropiedad podemos alinear divlos hijos de a en diferentes direcciones como en el siguiente ejemplo:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
  • justify-content:center  coloca los elementos en el centro del contenedor.
  • justify-content:flex-start pone los elementos al principio del contenedor de la izquierda.
  • justify-content:flex-end coloca elementos al final del contenedor en el lado derecho.
  • justify-content:space-around hace que los elementos quepan en el contenedor y coloque un espacio igual entre todos los elementos.
  • justify-content:space-evenly distribuye los elementos dentro del contenedor principal por igual con el mismo espacio y el mismo ancho.

El ejemplo anterior se aplica a todos los elementos secundarios como grupo.

Imagínese si quisiéramos alinear uno solo divdentro del contenedor. Siempre podemos usar align-selfpara alinear un solo elemento.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

Podemos aplicar lo mismo a un texto con Flexboxcomo en el siguiente ejemplo:

  .right{ display: flex; align-items: flex-end; flex-direction: column; } right div

Este es un gran tweet de Julia Evans que ilustra el centrado en CSS en general:

Envolver

Hay muchas formas de centrar elementos en CSS. Y siempre aprenderá cosas nuevas con el tiempo a medida que practique más y más.

Así que te recomiendo que trabajes con algunos ejemplos de lo que aprendiste hoy para que se mantenga.

  • ¿Deberías seguirme en Twitter?
  • Echa un vistazo a My Github
  • Visite mi Blog