Advanced Search

Vertically and Horizontally Centered Images in CSS

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .logo {
  3.   display: block;
  4.   text-align: center;
  5.   display: block;
  6.   text-align: center;
  7.   vertical-align: middle;
  8.   border: 4px solid #dddddd;
  9.   padding: 4px;
  10.   height: 74px;
  11.   width: 74px; }
  12.   .logo * {
  13.     display: inline-block;
  14.     height: 100%;
  15.     vertical-align: middle; }
  16.     .logo .photo {
  17.     height: auto;
  18.     width: auto;
  19.     max-width: 100%;
  20.     max-height: 100%;
  21. }
  22. </style>
  23. <figure class='logo'>
  24.     <span></span>
  25.     <img class='photo'/>
  26. </figure

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.