jquery - CSS: align image icon of any size in the middle-center of a box -


i've been through several posts , visited other websites still can't find solution this. tried several suggestions no avail , i've been trying several hours since yesterday , today figure solution. please, forgive me if question may duplicate truth none of solutions worked out me. in fact, before rebuilding whole page, appreciate here. boss "simply" wants see icon fit in middle-center of box. since there's no text inside box, vertical-align: middle; not apply. images can different sizes, cannot count on fixed size position it.

thanks

img {     max-width: 100%;     max-height: 100%; } .imageholder {     margin: 2px 10px;     padding: 5px;     border: 1px solid #999;     background-color: white;       display: inline-block;       vertical-align: middle; } #contenido .logo-radio .imageholder {     width: 72px;     height: 72px;   }  <div class="logo-radio">     <article class="imageholder">         <a href="#"><img src="#" alt="logo 750"></a>     </article> </div> 

fiddle

i found solution. here's code:

.imageholder {     text-decoration: none;     display: inline-block;     height: 72px;     width: 72px;     overflow: hidden;     position: relative;     border: 1px solid silver;     vertical-align: middle;     margin: 5px;     padding: 3px; }  .imageholder img {     max-width: 100%;     max-height: 100%;     margin: auto;     display: block;     position: absolute;     top: 0;     bottom: 0;     left: 0;     right: 0; } 

i created jsfiddle show it:


Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -