Advertisements
How to Vertically Align an Image inside a DIV using CSS
Topic: HTML / CSSPrev|Next
Answer: Use the CSS vertical-align Property
You can align an image vertically center inside a <div> by using the CSS vertical-align property in combination with the display: table-cell; on the containing div element.
Additionally, since CSS margin property is not applicable to display: table-cell; elements, so we've wrapped the containing DIV with another DIV (.outer-wrapper) and applied margin on it. This solution will work even for images with greater height than containing DIV.
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Center the IMG in a DIV with CSS</title>
<style>
.outer-wrapper{
display: inline-block;
margin: 20px;
}
.frame{
width: 250px;
height: 200px;
border: 1px solid black;
vertical-align: middle;
text-align: center;
display: table-cell;
}
img{
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Alignment of undersized image -->
<div class="outer-wrapper">
<div class="frame">
<img src="images/club.jpg" alt="Club Card">
</div>
</div>
<br>
<!-- Alignment of vertically oversized image -->
<div class="outer-wrapper">
<div class="frame">
<img src="images/kites.jpg" alt="Flying Kites">
</div>
</div>
<br>
<!-- Alignment of horizontally oversized image -->
<div class="outer-wrapper">
<div class="frame">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
</div>
</body>
</html>You can also use the CSS positioning method to vertically align an image inside a DIV.
Let's take a look at an example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Align an Image inside a DIV using CSS</title>
<style>
.frame{
width: 250px;
height: 200px;
margin: 20px;
border: 1px solid black;
position: relative;
}
img{
max-height: 100%;
max-width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- Alignment of undersized image -->
<div class="frame">
<img src="images/club.jpg" alt="Club Card">
</div>
<br>
<!-- Alignment of vertically oversized image -->
<div class="frame">
<img src="images/kites.jpg" alt="Flying Kites">
</div>
<br>
<!-- Alignment of horizontally oversized image -->
<div class="frame">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
</body>
</html>Related FAQ
Here are some more FAQ related to this topic:
- How to transform image size on mouse hover without affecting the layout in CSS
- How to position text over an image using CSS
- How to change image on hover with CSS
Advertisements
