wikipediaillustrated

marketing

Cómo centrar texto en CSS

Site owner learning how to center

Alinear el texto a lo largo del eje central puede hacer que una página se vea organizada y simétrica; también puede atraer la atención del visitante hacia elementos particulares de la página. Por ejemplo, los títulos, las citas en bloque y las llamadas a la acción a menudo se centran para interrumpir el flujo del documento y captar la atención del lector. Es por eso que el texto CTA a continuación está centrado.

Para asegurarse de que comprende este tipo de alineación común, primero veremos cómo centrar el texto horizontalmente. Luego veremos algunas formas de centrar el texto verticalmente.

Comencemos con un ejemplo fácil. Digamos que tiene una página web de solo texto y desea centrar todo el texto. Entonces podrías usar el selector universal CSS (*) o el selector de tipo cuerpo para apuntar a cada elemento de la página. Luego, establecería la propiedad de alineación de texto en el centro.

Aquí está el CSS:

 
* {

text-align: center;

}

Su CSS también podría verse así:

 
body {

text-align: center;

}

Aquí está el HTML:

 
<h2>How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>Using either the universal selector or type selector <strong>body</strong> and the CSS text-align property set to “center,” everything on the page will be centered.</p>

Aquí está el resultado:

Todo el texto, incluidos los encabezados y los párrafos, se centran con CSS

Fuente de imagen

Recurso destacado

Una guía introductoria a CSS para especialistas en marketing

Complete el formulario para obtener su copia de esta guía CSS 101.




¿Qué sucede si no desea que todo el texto de la página esté centrado o si su página contiene imágenes y otros elementos además del texto? En ese caso, usaría la misma propiedad de alineación de texto pero un selector de CSS diferente. Por ejemplo, digamos que desea que los encabezados estén centrados en una página, pero que los párrafos estén alineados a la izquierda. Entonces usarías el selector de tipo h2 y establezca la propiedad de alineación de texto en el centro. No es necesario que agregue más código para alinear los párrafos; de manera predeterminada, se alinearán a la izquierda.

Aquí está el CSS:

 
h2 {

text-align: center;

}

Aquí está el HTML:

 
<h2>How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>Since I’m using the W3Schools Tryit Editor, the default alignment is left. So if you want to change the alignment of the heading text, for example, then you can use a type selector and the CSS text-align property set to “center.” Everything else on the page — in this case, the paragraphs — will remain flushed against the left margin.</p>

Aquí está el resultado:

Solo los encabezados están alineados en el centro de la página con CSS

Fuente de imagen

Si desea centrar solo un elemento en la página, puede agregar un atributo de identificación al elemento y orientarlo con un selector de identificación. O bien, podría usar CSS en línea.

Primero, usemos un atributo de ID y un selector.

Aquí está el CSS:

 
#center {

text-align: center;

}

Aquí está el HTML:

 
<h2 id="center">How to Center Align Text in CSS</h2>

<p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p>

<h2>The Explanation</h2>

<p>To center only one heading on the page, I can add the ID attribute <strong>center</strong> to the opening tag of the element. Then I'll use use the ID selector <strong>#center</strong> and the CSS text-align property set to “center." Only that heading will be centered on the page. The other text will remain left aligned by default.</p>

Aquí está el resultado:

Solo un encabezado está centrado en la página usando un selector de ID de CSS

Fuente de imagen

Ahora usemos CSS en línea. Pero en lugar de centrar títulos y párrafos, centremos el texto dentro de otro elemento.

Decir…

Puede que también te guste...

Deja una respuesta

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