Untitled

<!DOCTYPE html>
<html>
<head>
<style>
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
div {
width: 100%;
margin: auto;
background-color: hotpink;


}
.flimkh {
background-color: maroon;
margin: auto;
width: 90%;
}
img{
width: 300px;
}
.img1 {
float: right;
}
.img2 {

}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<div class="clearfix">
<div class="flimkh clearfix">
<img class="img1" src="paris.jpg" alt="Paris">
<img class="img2" src="paris.jpg" alt="Paris">
</div>
</div>
</body>
</html>