HTML - <center> Tag

HTML <center> tag is used to make center align the block-level and content. Center tag make the element center as well as the content at once.

HTML <center> tag is deprecated so, if we need to achieve the same result we can use the CSS property.

Syntax

<cenetr>...</cenetr>

Attribute

HTML cenetr tag supports Global and Event attributes of HTML.

Examples of HTML center Tag

Below examples will illustrate the HTML center tag, and we will use alternate option of center tag as well.

Center Textual Content

Let's look at the following example, where we are going to use the center tag to make a pragraph content center aligned.

<!DOCTYPE html>
<html>
<head>
   <title>HTML center Tag</title>
</head>
<body>
   <center>
      <p>
         This text is centered
      </p>
   </center>
</body>
</html>

Comparing CSS property with center Tag

In this example you will see the difference between center tag and CSS properties that is used to create element/content center aligned. As you will see if the with of the element is decided then we need multiple CSS property to match center tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML center Tag</title>
   <style>
   p{
       border: 2px solid black; width:200px; 
   }
   </style>
</head>
<body>
   <h3>Center aligned element and text at Once - Using center Tag</h3>    
   <center>
      <p>
         This text is centered
      </p>
   </center>
   <hr>
   <h3>Center aligned text - Uasing text-align Property</h3>    
   <p style="text-align: center;">
       This text is centered
   </p>
   <hr>
   <h3>Center aligned element - Using margin-inline Property</h3>    
   <p style="margin-inline: auto;">
       This text is centered
   </p>
</body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
center Yes Yes Yes Yes Yes
html_deprecated_tags.htm
Advertisements