Back to Content

: The Centered Text element

files/en-us/web/html/reference/elements/center/index.md

latest1.8 KB
Original Source

{{deprecated_header}}

The <center> HTML element is a block-level element that displays its block-level or inline contents centered horizontally within its containing element. The container is usually, but isn't required to be, {{HTMLElement("body")}}.

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS {{Cssxref("text-align")}} property, which can be applied to the {{HTMLElement("div")}} element or to an individual {{HTMLElement("p")}}. For centering blocks, use other CSS properties like {{Cssxref("margin-left")}} and {{Cssxref("margin-right")}} and set them to auto (or set {{Cssxref("margin")}} to 0 auto).

DOM interface

This element implements the {{domxref("HTMLElement")}} interface.

Example 1

html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>

Result

{{EmbedLiveSample("Example 1")}}

Example 2 (CSS alternative)

html
<div class="center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
css
.center {
  text-align: center;
}

Result

{{EmbedLiveSample("Example 2 (CSS alternative)")}}

Example 3 (CSS alternative)

html
<p class="center">
  This line will be centered.

  And so will this line.
</p>
css
.center {
  text-align: center;
}

Result

{{EmbedLiveSample("Example 3 (CSS alternative)")}}

[!NOTE] Applying {{cssxref("text-align", "text-align: center")}} to a {{HTMLElement("div")}} or {{HTMLElement("p")}} element centers the contents of those elements while leaving their overall dimensions unchanged.

<!-- ## Technical summary -->

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • {{Cssxref("text-align")}}
  • {{Cssxref("display")}}