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>
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
Post a Comment