Centered Images in CSS without Tables

Submitted by:Pitter Alderson

Date added:11 March, 2014

Category:CSS

Cross Browser Vertically and Horizontally Centered Images in CSS without Tables

Tags: vertically centered images , horizontally centered images

Code Snippet:

<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>


.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }
 
 

Comments