How to Centre Images in CSS

How to Centre Images in CSS. In this article i will share how to centre images using CSS.

In some situation we might want to centre our image , to make it align to our designs and theme.

We can do this using several method. The most common method is using the ” Text-align” method. While in this article we will look into a different approach on how we can centre our image.

In order to do this there are 2 commands involve . the first one is “Display ” while the second one is “Margin”.

Refer the Code Below

HTML

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>GETTING STARTED WITH BRACKETS</title>
        <meta name="description" content="Just another Website.">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Arvo|Indie+Flower|Ranchers" rel="stylesheet">
    </head>
    <body>
      
      <div class="container">
          <img src="images.jpg " class="borderImage">
                 
        </div>       
         
    </body>
</html>

CSS

html{
     
    background-color: darkgrey;
}
 
img{
   max-width: 100%;
   height:auto;
   padding:5px;
     
}
 
.borderImage{
  border-radius: 10px;
  width: 300px;
  height: 300px;
  border : 3px solid #ddde;
  padding : 20 ;
  opacity: 0.5;
  display: block;
  margin:auto;
   
}

Output

Check out HTML School

Check out how to add transparency to Images using CSS here.

How to Centre Images in CSS

Refer the Code Below

Leave a Comment Cancel reply