Advanced Search

Cross Browser Vertically and Horizontally Centered Images in CSS without Tables

/ Published in: CSS
Save to your folder(s)
this centers an image of unknown size vertically and horizontally within a box

Expand | Embed | Plain Text

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

URL: http://snippets.dzone.com/posts/show/12757

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.