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.
Leave a Reply