Center image using text-align center with CSS?

HTML Web Development Front End Technology CSS

The text-align center is generally used to center text of an element. Let us see an example wherein we have centered a heading using the text-align center.

Center a text using text-align property in CSS

In this example, we have centered a heading using the text-align property −

h1 {
   text-align: center;
}

Example

Let us now see the example to center a text −


<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is demo text.</p>
</body>
</html>

Output

Center an image using text-align property in CSS

Let us now see how to center an image using text-align property in CSS. The center value of the textalign property is used for this −

.myimg {
   text-align: center;
}

Here’s our image under div −

<div class="myimg">
   <img src="https://www.tutorialspoint.com/jsf/images/jsf-mini-logo.jpg" />
</div>

Example

Let us now see the complete example to center an image −


<!DOCTYPE html>
<html>
<head>
   <style>
      .myimg {
         text-align: center;
      }
   </style>
</head>
<body>
   <h1>Centering an Image</h1>
   <div class="myimg">
      <img src="https://www.tutorialspoint.com/jsf/images/jsf-mini-logo.jpg" />
   </div>
</body>
</html>