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

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

asp.net - In javascript how to find the height and width -

c# - DataTable to EnumerableRowCollection -