admin
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
Usando CSS, puede centrar el texto en un div de varias maneras. La forma más común es usar la propiedad de alineación de texto para centrar el texto horizontalmente. Otra forma es usar las propiedades line-height y vertical-align. La última forma se aplica exclusivamente a elementos flexibles y requiere las propiedades de justificar contenido y alinear elementos. Con este método, puede centrar el texto horizontalmente, verticalmente o ambos. Echaremos un vistazo más de cerca a cada método a continuación.
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». Luego puede usar el selector de CSS .center para diseñarlo 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».
Recurso destacado: Guía de introducción a CSS y HTML
.png "11 formas de centrar div o texto en div en CSS 3")
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…
