CSS Center image

A common task in CSS is the centering of images or texts.

To center an image, we can use the CSS properties like margin:left, margin-right, and block CSS properties.

The <img> element is said to be an inline element that can easily be centered by applying the text-align:center property of CSS to the parent element that contains it.

Using the text-align:center property, we must have to place the <img> element within a block-level element such as div. It is because we can apply the text-align:center property only to the block-level elements. It will center the image horizontally.

Let's understand it by using an illustration.

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         body{
            background-color:lightblue;
         }
         #image {
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: 5px dotted brown;
            padding: 5px;
         }
      </style>
   </head>
   <body>
      <img src = "jtp.png" id ="image" width="300" height="300">
   </body>
</html>

Test it Now

Let's take another example of centering the image in which we will use the text-align:center property.

Example

<!DOCTYPE html>
<html>
   <head>
      <style>
         body{
            background-color:lightblue;
         }
         .image {
            border: 2px dotted black;
            width: 20%;
            padding: 5px;
            text-align:center;
         }
      </style>
   </head>
   <body>
      <div class="image">
         <h1>Image within a div element</h1>	
         <img src="jtp.png" alt="" class="picture-img" />
     </div>
   </body>
</html>

Test it Now

Next TopicCSS Opacity

← prev next →