Ya sea que esté creando un sitio desde cero o con el marco Bootstrap CSS, deberá tener una comprensión básica de HTML y CSS para crear y personalizar sus diseños.
Uno de los principales desafíos de la creación de diseños es la organización y el estilo de los elementos en la página. ¿Quieres que los elementos se superpongan o que haya espacio entre ellos? ¿Quieres que el diseño sea receptivo? ¿Desea que parte del texto de la página esté centrado y el resto alineado a la izquierda? Estas son solo algunas preguntas que tendrá que responder mientras codifica.
Afortunadamente, los divs pueden ayudar. Los divs, abreviatura de elementos de división de contenido, son elementos HTML que pueden dividir su página web en secciones para que pueda orientarlos con propiedades CSS únicas. Por ejemplo, supongamos que desea incluir un título debajo de una imagen en una publicación de blog. El cuerpo del texto está alineado a la izquierda, es negro y tiene un tamaño de 18 px, pero desea que el texto del título esté centrado horizontalmente, sea gris y tenga un tamaño de 14 px para que no compita tanto por la atención del visitante. En ese caso, podría envolver el texto en un elemento div y aplicar CSS a ese elemento específico. El otro texto en la página permanecería sin cambios.
Comprender cómo centrar divs y texto en divs, en particular, es una habilidad valiosa para programadores principiantes. Puede ayudar a evitar que el contenido se extienda hasta los bordes de su contenedor, se superponga con otros elementos de la página u otros problemas que surjan al crear diseños de páginas web.
En esta publicación, cubriremos varios métodos para centrar elementos en CSS, que incluyen:
Cómo centrar texto en div en CSS
Nota: Los ejemplos incluidos a lo largo se basan en W3Schools Editor de prueba. Puede hacer clic en cualquiera de los enlaces de origen para ver los ejemplos completos.
Cómo centrar texto en div horizontalmente
Hay dos formas de centrar el texto en un div horizontalmente. Echemos un vistazo a los ejemplos de cada método a continuación.
Uso de la propiedad de alineación de texto
En la mayoría de los casos, puede centrar el texto horizontalmente en un div usando la propiedad de alineación de texto y definiéndolo con el valor «centro».
Digamos que desea crear un elemento div con un breve párrafo dentro y un borde amarillo alrededor. En su HTML, le daría al div un nombre de clase como «centro». A continuación, puede utilizar el Selector de CSS .center para darle estilo con las propiedades de borde y alineación de texto.
Aquí está el CSS:
.center {
border: 5px solid #FFFF00;
text-align: center;
}
Aquí está el HTML:
<div class="center">
<p>The text within the div is centered horizontally.</p>
</div>
Aquí está el resultado:
Uso de la propiedad Justify-Content
Hay una excepción a la regla anterior. Si está utilizando la propiedad de visualización para definir su div como un contenedor flexible, entonces no puede usar la propiedad de alineación de texto para centrar el texto horizontalmente dentro del div. En su lugar, debe usar la propiedad justificar contenido y definirla con el valor «centro».
Vamos a crear el mismo elemento div con un borde amarillo alrededor que el anterior. En su HTML, le daría al div el nombre de clase «centro» y usaría el mismo selector de clase para diseñarlo con CSS. Puede comenzar definiendo la propiedad de borde como lo hizo anteriormente. Luego, defina la propiedad de visualización como «flex » para convertir el div en un contenedor flexible y definir la propiedad de contenido justificado como «centro».
Aquí está el CSS:
.center {
border: 5px solid #FFFF00;
display: flex;
justify-content: center;
}
Aquí está el HTML:
<div class="center">
<p>The text within the div is centered horizontally.</p>
</div>
Aquí está el resultado:
Cómo centrar texto en div verticalmente
Hay tres formas de centrar el texto en un div verticalmente. Son un poco más complicados que los métodos para centrar texto en un div horizontalmente.
Echemos un vistazo a los ejemplos de cada método a continuación.
Uso de la propiedad de relleno
En la mayoría de los casos, puede centrar el texto verticalmente en un div usando la propiedad de relleno. Si bien puede usar la forma abreviada, usar la propiedad de relleno abreviado es más fácil porque solo tiene que establecer dos valores. El primer valor establecerá el relleno superior e inferior. El segundo establecerá el relleno derecho e izquierdo. Dado que desea centrar el texto verticalmente, el primer valor puede ser cualquier longitud positiva o valor porcentual. El segundo valor debe ser 0.
Aquí está el CSS:
.center {
border: 5px solid #FFFF00;
padding: 50px 0;
}
Aquí está el HTML:
<div class="center">
<p>The text within the div is centered vertically.</p>
</div>
Aquí está el resultado:
Uso de la propiedad de altura de línea
En la mayoría de los casos, también puede centrar el texto verticalmente en un div configurando la propiedad line-height con un valor que es igual a la altura del elemento contenedor.
Vamos a crear el mismo elemento div con un borde amarillo alrededor que el anterior. En su HTML, simplemente agregaría algo de texto dentro del div y le daría el nombre de clase «centro». No agregue etiquetas de párrafo alrededor del texto, ya que eso descentraría el texto. Ahora use el selector de clase .center para diseñar con CSS. Puede comenzar definiendo la propiedad de borde como lo hizo anteriormente. Ahora configure las propiedades de altura y altura de línea con el mismo valor.
Aquí está el CSS:
.center {
border: 5px solid #FFFF00;
line-height: 150px;
height: 150px;
}
Aquí está el HTML:
<div class="center">This single line of text is centered vertically.
</div>
Aquí está el resultado:
Ese método solo funcionará para una sola línea de texto. Si tiene varias líneas de texto dentro de un div, tendrá que definir algunas propiedades más.
Una vez que complete los pasos anteriores, podrá comience un nuevo conjunto de reglas con el selector de CSS .center p para diseñar el párrafo dentro del div. Primero, desea definir la propiedad de visualización como «bloque en línea» para que el párrafo fluya naturalmente dentro del div. Luego establezca la propiedad de altura de línea en «normal» y la propiedad de alineación vertical en «medio». Esto asegurará que el texto dentro del div esté centrado verticalmente, ya sea una línea de texto o varias líneas.
Aquí está el CSS:
.center {
border: 5px solid #FFFF00;
line-height: 150px;
height: 150px;
}
.center p {
display: inline-block;
line-height: normal;
vertical-align: middle;
}
Aquí está el HTML:
<div class="center">
<p>The text within the div is centered vertically. The text within the div is centered vertically. The text within the div is centered vertically.</p>
</div>
Aquí está el resultado:
Uso de la propiedad Alinear elementos
Nuevamente, si está utilizando la propiedad de visualización para definir su div como un contenedor flexible, entonces no puede usar el método anterior para centrar el texto verticalmente dentro del div. En su lugar, debe usar la propiedad align-items y definirla con el valor «centro».
Vamos a crear el mismo elemento div que el anterior, dándole el nombre de clase .center y definiendo la propiedad border en CSS. Luego, defina la propiedad de visualización como «flex» para hacer que el div sea un contenedor flexible. Para ver más claramente que el texto está centrado verticalmente, defina también la propiedad de altura. De lo contrario, el contenedor flexible solo tendrá la altura necesaria para contener el párrafo en su interior. Luego, defina la propiedad align-items como «centro».
Aquí está el CSS:
.center {
border: 5px solid #FFFF00;
display: flex;
height: 150px;
align-items: center;
}
Aquí está el HTML:
<div class="center">
<p>The text within the div is centered vertically.</p>
</div>
Aquí está el resultado:
Cómo centrar una división en CSS
Puede centrar un div de diferentes maneras en CSS. Si bien es fácil centrar un div horizontalmente en una página, es más complicado hacerlo verticalmente (¡pero aún manejable!).
Veremos estos dos métodos a continuación y luego explicaremos cómo puede centrar un div horizontal y verticalmente o centrar un div dentro de otro div.
Cómo centrar un div horizontalmente
Para centrar un div horizontalmente en una página, simplemente establezca el ancho del elemento y la propiedad de margen en automático. De esa manera, el div ocupará el ancho especificado en el CSS y el navegador se asegurará de que el espacio restante se divida en partes iguales entre los dos márgenes.
Tenga en cuenta que, a diferencia de la propiedad de margen, la propiedad de relleno de CSS se usa para crear un espacio entre el borde del div y el párrafo dentro del div (el elemento en línea).
Puede obtener más información sobre las diferencias entre estas dos propiedades en CSS Margen vs. Padding: ¿Cuál es la diferencia?
Aquí está el CSS:
.center {
margin: auto;
width: 60%;
border: 5px solid #FFFF00;
padding: 10px;
}
Aquí está el HTML:
<div class="center">
<p>This div takes up the width specified in CSS and the remaining space is split equally between the two margins.</p>
</div>
Aquí está el resultado:
Cómo centrar un div verticalmente
Para centrar un div verticalmente en una página, puede usar el Propiedad de posición CSS, propiedad superior y propiedad de transformación.
Comience configurando la posición del div en absoluto para que se elimine del flujo de documentos normal.
Luego establezca la propiedad superior en 50%. Esto le dice al navegador que alinee el borde superior del div con el centro de la página verticalmente (es decir, 50% hacia abajo de la página). Aquí está el problema: tener el borde superior del div alineado en el medio de la página hará que el div se vea descentrado. Aquí hay un ejemplo.
Para centrar verdaderamente un div, debe definir una última propiedad, conocida como Propiedad de transformación CSS. Si bien hay nueve métodos de transformación diferentes (y esto ni siquiera incluye transformaciones 3D), desea utilizar el método translate() para mover el div a lo largo del eje Y. Específicamente, desea mover el div un 50 % hacia arriba desde su posición actual. Eso le indicará al navegador que coloque el centro del div en el centro vertical de la página.
Echemos un vistazo al código que necesitarías escribir.
Aquí está el CSS:
.center {
position: absolute;
top: 50%;
transform: translate(0, -50%);
border: 5px solid #FFFF00;
padding: 10px;
}
Aquí está el HTML:
<div class="center">
<p>This div is vertically centered.</p>
</div>
Aquí está el resultado:
Cómo centrar un div horizontal y verticalmente
Para centrar un div horizontal y verticalmente en una página, puede seguir casi exactamente los mismos pasos descritos en la sección anterior. Usará la propiedad CSS position, top y transform; la única diferencia es que también usará la propiedad left para centrar horizontalmente el div.
Comience configurando la posición del div en absoluto para que se elimine del flujo de documentos normal. Luego establezca las propiedades izquierda y superior al 50%. Esto le dice al navegador que alinee el borde izquierdo y superior del div con el centro de la página horizontal y verticalmente (es decir, 50% a la derecha y hacia abajo de la página). Si te detienes ahí, te encontrarás con el mismo problema…