En numerosas ocasiones, centrar un texto dentro de un div, se convierte en una tarea complicada. En este post vamos a enseñarte a centrar el texto tanto horizontal como verticalmente y que además sea adaptativo.
Vamos a ver cómo se hace este ejemplo; se trata de una capa que contiene un background-image y sobre la que hemos puesto un texto, que ha quedado centrado horizontal y verticalmente, independientemente del tamaño de la caja contenedora.
Vamos a ver cómo lo hemos hecho.
Para empezar, definimos un contenedor con el tamaño que va a llevar el módulo, y le aplicamos una CSS en la que simplemente definimos un width, un height y el background con la imagen.
<div class="contenedor"></div>
.contenedor{width:350px; height: 500px;
background-image: url("nombreimagen.jpg");}
Dentro de este contenedor, metemos la caja que va a llevar el texto centrado. Para ello he visto que hay muchas maneras de hacerlo, pero esta me parece la más completa, ya que no hace falta definir el tamaño del contenedor, de modo que conseguimos que funcione en cualquier tipo de resolución de pantalla, desktop o mobile. Se trata del flex, un módulo de caja flexible, conocido como flexbox, un método que mejora las capacidades de alineación.
No hace falta que sepáis flex, basta con que metáis esta CSS dentro del div que contiene al texto y que va dentro del que acabamos de ver (contenedor):
<div class="contenedor">
<div class="bloque">Texto</div>
</div>
.contenedor{width:350px; height: 500px;
background-image: url("nombreimagen.jpg");}
.bloque{display: flex; flex-direction: column;
justify-content: center; align-items: center;
flex:1; height:100%; }
Y eso es todo, así de fácil !!!
