css - How to center an image horizontally and align it to the bottom of the container? -
how can center image horizontally , aligned bottom of container @ same time?
i have been able center image horizontally self. have been able align bottom of container self. have not been able both @ same time.
here have:
.image_block { width: 175px; height: 175px; position: relative; margin: 0 auto; } .image_block img { position: absolute; bottom: 0; } <div class="image_block"> <a href="..."><img src="..." border="0"></a> </div>
that code aligns image bottom of div. need add/change make center image horizontally inside div? image size not known before hand 175x175 or less.
.image_block { width: 175px; height: 175px; position: relative; } .image_block { width: 100%; text-align: center; position: absolute; bottom: 0px; } .image_block img { /* nothing specific */ }
explanation: element positioned absolutely relative closest parent has non-static positioning. i'm assuming you're happy how .image_block
displays, can leave relative positioning there.
as such, <a>
element positioned relative .image_block
, give bottom alignment. then, text-align: center
<a>
element, , give 100% width size of .image_block
.
the <img>
within <a>
center appropriately.
Comments
Post a Comment