How to Center an Image Vertically and Horizontally with CSS and html?
We need to create an image vertically and horizontally in center so need to create a image container as fixed size as given example: width:230px and height : 90px. Container need to add position:relative and define image propterty. Position:absolute also you can check on the below code.
All image using live path this is only for the demo
purpose.
We can see below code:-
imageCenter.Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Center</title>
<link href="imageCenter.css" rel="stylesheet" />
</head>
<body>
<div class="imageContainer">
<ul>
<li>
<img src="https://post.healthline.com/wp-content/uploads/2020/08/edible-flowers-732x549-thumbnail.jpg"
alt="image" />
</li>
<li>
<img src="https://ia1.pickupflowers.com/images/assets/images/flower-guide/national-flowers.jpg"
alt="image" />
</li>
<li>
<img src="https://cdn.britannica.com/88/194588-050-967E8D17/flowers.jpg" alt="image" />
</li>
<li>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/1200px-Flower_poster_2.jpg"
alt="image" />
</li>
<li>
<img src="https://images-na.ssl-images-amazon.com/images/I/71zNWbTHzxL._SL1500_.jpg" alt="image" />
</li>
<li>
<img src="https://www.kindpng.com/picc/m/139-1392610_transparent-flowers-vector-png-flower-vector-design-png.png"
alt="image" />
</li>
</ul>
</div>
</body>
</html>
imageCenter.css
*,body{
margin: 0;
padding: 0;
border: 0;
}
.imageContainer{
margin: 20px auto;
max-width: 1000px;
}
.imageContainer ul{
list-style: none;
}
.imageContainer ul li{
margin: 10px;
padding: 0px;
position: relative;
display: inline-block;
width: 230px;
height: 90px;
border: 1px solid #ccc;
border-radius: 3px;
}
.imageContainer ul li img{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
text-align: center;
max-width: 100%;
max-height: 100%;
}
No comments:
Note: Only a member of this blog may post a comment.