How to center an image horizontally and align it to the bottom of the container?

前端 未结 7 1522
执念已碎
执念已碎 2021-01-31 15:29

How can I center an image horizontally and aligned to the bottom of the container at the same time?

I have been able to center the image horizontally by its self. I hav

7条回答
  •  小鲜肉
    小鲜肉 (楼主)
    2021-01-31 15:50

    This also works (taken a hint from this question)

    .image_block {
      height: 175px;
      width:175px;
      position:relative;
    }
    .image_block a img{
     margin:auto; /* Required */
     position:absolute; /* Required */
     bottom:0; /* Aligns at the bottom */
     left:0;right:0; /* Aligns horizontal center */
     max-height:100%; /* images bigger than 175 px  */
     max-width:100%;  /* will be shrinked to size */ 
    }
    

提交回复
热议问题