askvity

How to Center Text in HTML?

Published in HTML Text Styling 4 mins read

Centering text in HTML can be achieved through various methods, each with its own use case and considerations. Here's a breakdown of common techniques, including using the now-deprecated <center> element.

Methods for Centering Text

1. Using the <center> HTML Element

  • The <center> tag is a block-level element that centers its content horizontally within its parent container.
  • Although it was a simple method to center text, it is now deprecated and should not be used in modern HTML. This element centers both text and any block-level or inline content within it.
  • According to the reference, the container is usually, but isn't required to be, <body>.
```html
<center>
  <p>This text is centered.</p>
</center>
```
  • Why it's discouraged: The <center> element is considered a presentational element, and modern web development favors separating content from presentation using CSS.

2. Using CSS text-align: center;

  • This is the most common and recommended way to center text. Apply the text-align: center; CSS property to a block-level element, and it will center the text within that element.
```html
<div style="text-align: center;">
  <p>This text is also centered.</p>
</div>
```
  • Advantages:
    • It provides separation of concerns (content and styling).
    • It's flexible and can be applied to various elements.
    • It’s a widely supported and modern CSS property.

3. Using CSS display: flex; and justify-content: center; (for Horizontal and Vertical Centering)

  • For both horizontal and vertical text centering (within a container), use CSS flexbox.
    <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
      <p>This text is centered both horizontally and vertically.</p>
   </div>
  • Key aspects:
    • display: flex; turns the container into a flex container.
    • justify-content: center; centers items horizontally on the flex container's main axis.
    • align-items: center; centers items vertically on the flex container's cross-axis.
    • A height or min-height is often required for the vertical centering to be visible, so make sure the containing element has some height.

4. Using CSS display: grid; and place-items: center; (for Horizontal and Vertical Centering)

  • The CSS Grid method is another excellent option for centering text both horizontally and vertically, especially when dealing with more complex layouts.
    <div style="display: grid; place-items: center; height: 200px;">
      <p>This text is also centered both horizontally and vertically.</p>
   </div>
  • Key aspects:
    • display: grid; turns the container into a grid container.
    • place-items: center; centers items both horizontally and vertically within the grid.
    • As with flexbox, a height or min-height is required for the vertical centering to be visible.

Choosing the Right Method

Method Use Case Pros Cons
<center> Not recommended - formerly used for simple content centering Very easy to use. Deprecated, separates presentation from content, not flexible.
text-align: center; Basic horizontal text centering within a block element. Simple, widely supported, separates presentation from content. Only centers horizontally.
Flexbox Horizontal and vertical centering, dynamic layouts. Very flexible, powerful for layout, centers in both dimensions. Slightly more complex syntax.
Grid Horizontal and vertical centering, complex layouts Powerful for more complex page layouts, centers in both dimensions. Slightly more complex syntax.

Conclusion

Centering text in HTML is a common requirement, and it's crucial to use modern methods like CSS text-align: center, flexbox, or grid for robust, flexible, and maintainable code. Avoid using the <center> tag due to its deprecation.

Related Articles