wikipediaillustrated

marketing

11 formas de centrar div o texto en div en CSS

Website owner centering div element in CSS.jpgkeepProtocol

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.

Recurso destacado

La guía para principiantes de HTML y CSS

Complete el formulario para obtener más información sobre CSS.




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:

El texto en un div se centra horizontalmente usando la propiedad de alineación de texto en CSS-1

Fuente de imagen

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

html-cssDescarga la Guía CSS gratuita

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:

El texto en un contenedor flexible se centra horizontalmente usando la propiedad de contenido justificado en CSS-1

Fuente de imagen

Cómo centrar texto en div verticalmente

Hay tres formas de centrar el texto en un div verticalmente. Son un poco más…

Puede que también te guste...

Deja una respuesta

Tu dirección de correo electrónico no será publicada.