admin
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.
Cómo centrar texto en CSS
Para centrar el texto en CSS, use la propiedad de alineación de texto y defínala con el valor «centro».
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:
¿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:
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:
Ahora usemos CSS en línea. Pero en lugar de centrar títulos y párrafos, centremos el texto dentro de otro elemento.
Decir…
