Alinear el texto a lo largo del eje central puede hacer que su página se vea ordenada y simétrica; también puede atraer la atención de los visitantes hacia elementos específicos de la página. Por ejemplo, los títulos, las citas en bloque y las llamadas a la acción a menudo se centran en interrumpir el flujo del documento y captar la atención del lector. Por lo tanto, el texto de la CTA a continuación está centrado.
Para asegurarse de que comprende este tipo común de alineación, primero analizaremos cómo centrar el texto horizontalmente. A continuación, veremos algunas formas de centrar el texto verticalmente.
Cómo centrar texto en CSS
Para centrar el texto en CSS, use la propiedad text-align y defínala con el valor «center».
Comencemos con un ejemplo simple. Suponga que tiene una página de texto y desea centrar todo su texto. Entonces puedes usar el selector universal de CSS (*) o selector de tipo cuerpo para apuntar a cada elemento de la página. Luego establecerá 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 código 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 su página esté centrado o si su página tiene imágenes y otros elementos además del texto? En este caso, utilizará la misma propiedad de alineación de texto, pero un selector de CSS diferente. Por ejemplo, suponga que desea que los encabezados estén centrados en la página, pero los párrafos están alineados a la izquierda. Entonces usarás el selector de tipo h2 y establezca la propiedad de alineación de texto en el centro. No necesita agregar más código para justificar los párrafos; se dejarán justificados de manera predeterminada.
Aquí está el CSS:
h2 {text-align: center;
}
Aquí está el código 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 solo desea centrar un elemento en la página, puede agregar un atributo de identificación al elemento y orientarlo mediante el selector de identificación. También puede utilizar el CSS integrado.
Primero, usemos un atributo ID y un selector.
Aquí está el CSS:
#center {text-align: center;
}
Aquí está el código 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 el CSS incorporado. Pero en lugar de centrar los encabezados y párrafos, centremos el texto dentro de otro elemento.
Digamos que estoy creando una página web usando Bootstrap CSS y agregando un botón de Bootstrap que quiero centrar en la página. La alineación del botón y el texto dentro del botón sería ligeramente diferente de los ejemplos anteriores. Esto se debe a que la propiedad de alineación de texto solo funciona en elementos de bloque como encabezados y párrafos, no en elementos en línea como botones.
Así que primero tendría que envolver el botón en un div. Luego, podría aplicar el CSS incorporado al div como se muestra a continuación.
Aquí está el HTML con CSS integrado:
<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. </p>
<h3>The Explanation</h3>
<p>If I want to center an inline element, like a button, then I need to wrap it in a block-level element, like a div first. Only then can I can apply the text-align property to the div. If I want to center this div only, I can use a style attribute that contains the text-align property set to “center.” Everything else on the page will remain flushed against the left margin.</p>
<div style="text-align:center">
<button type="button" class="btn btn-primary">Click Me</button>
</div>
Aquí está el resultado:
Como se puede ver en los ejemplos anteriores, la propiedad text-align solo determina la alineación horizontal del texto. Especificar la alineación vertical del texto es más complicado. Miremos abajo.
Alinear texto verticalmente
Hay varias formas de centrar el texto verticalmente. Para los métodos a continuación, el texto deberá estar contenido en un padre como div. Comencemos con el más fácil.
Tenga en cuenta que si desea que el texto también esté centrado horizontalmente, simplemente agregue una propiedad de alineación de texto establecida en el centro del CSS en cualquiera de los ejemplos a continuación.
Texto centrado verticalmente usando relleno CSS
Una de las formas más fáciles de centrar el texto verticalmente es usar relleno superior e inferior.
Para aplicar relleno CSS a un elemento, puedo usar el método de formato largo y definir las propiedades de relleno superior e inferior en mi CSS. O bien, puedo usar la propiedad de relleno abreviada e incluir tres valores: el primer valor representará el complemento superior, el segundo representará el complemento izquierdo y derecho, y el tercero representará el complemento inferior.
Aquí está el CSS usando el método abreviado:
.center { padding: 50px 0 50px;
background: #999FF0;
}
Aquí está el código HTML:
<h2>How to Center Text Vertically</h2><p>You can use the padding property to center the text within a div element vertically.</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
Aquí está el resultado:
Centre el texto verticalmente con la propiedad CSS Line-Height
También puede usar la propiedad line-height de CSS para centrar el texto en el elemento verticalmente. Deberá establecer la propiedad en un valor igual a la altura del elemento contenedor.
Aquí está el CSS:
.center { line-height: 150px;
height: 150px;
background: #999FF0;
}
Aquí está el código HTML:
<h2>How to Center Text Vertically</h2><p>You can use the line-height property to center the text within a div element vertically.</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
Aquí está el resultado:
Centre el texto verticalmente con la posición CSS y transforme las propiedades
Otra forma de centrar el texto verticalmente en la página requiere la posición CSS y las propiedades de transformación.
Para comenzar, establezca la posición del div que contiene el texto en relativo. Luego, desea diseñar el párrafo en el div. Primero, establezca su posición en absoluto para que se excluya del flujo normal de documentos. Luego establezca las propiedades izquierda y superior al 50%. Esto le dice al navegador que alinee los bordes izquierdo y superior del párrafo con el centro de la página horizontal y verticalmente (es decir, 50% hacia la derecha y hacia abajo de la página). El problema es que no queremos que los bordes de los párrafos estén alineados en el medio de la página; queremos que el centro del párrafo esté alineado en el medio de la página.
Aquí es donde entra en juego la propiedad de transformación CSS. Usando un método de transformación conocido como traducir (), podemos mover el párrafo a lo largo de los ejes X e Y. Para centrar realmente el párrafo, muévalo un 50% hacia la izquierda y hacia arriba desde su posición actual. Esto le dice al navegador que centre el párrafo en el centro de la página.
Aquí está el CSS:
.center { position: relative;
height: 150px;
background: #999FF0;
}
.center p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
Aquí está el código HTML:
<h2>How to Center Text Vertically (and Horizontally)</h2><p>You can use the CSS position and transform property to center the text within a div element vertically and horizontally.</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
Aquí está el resultado:
Centrar texto verticalmente con Flexbox
Flexbox es uno de los mejores métodos de centrado de texto vertical (y horizontal), ya que responde y no requiere que se calculen los márgenes.
Primero, debe definir el contenedor principal, div en este caso, como un contenedor flexible. Para ello, establezca la propiedad de visualización en «flex». Luego defina las propiedades de alineación de elementos y justificación de contenido en «centro». Esto le indicará al navegador que centre el elemento flexible (elemento div en div) vertical y horizontalmente.
Aquí está el CSS:
.center { display: flex;
justify-content: center;
align-items: center;
height: 150px;
background: #999FF0;
}
Aquí está el código HTML:
<h2>How to Center Text Vertically (and Horizontally)</h2><p>You can use Flexbox to center the text within a div element vertically. Once you set the div's display property to "flex," set the align-items property to "center" to center the text vertically. To also center the text horizontally, set the justify-content property to "center."</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
Aquí está el resultado:
Centrar el texto en su sitio
Si tiene conocimientos básicos de HTML y CSS, puede centrar fácilmente el texto en sus páginas web. Esto puede ayudarlo a crear diseños de página personalizados y hacer que su contenido se destaque. Si está interesado en otros tipos de alineación, consulte Cómo alinear texto a la izquierda, a la derecha y al centro en HTML.
Publicado originalmente el 9 de noviembre de 2020 7:00:00 a. m., actualizado el 8 de octubre de 2021
