WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
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.

  • <!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:

  • <!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:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.