In this example you will learn, how to Vertically Align an Image inside a DIV using CSS. You can align an image vertically center inside a
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!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> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
