我想将图像对齐到div 的底部,并且还希望将其水平居中.

这就是我想要完成的事情(如下图所示),但在我的项目中,母牛之间存在巨大差距.牛的图片被切成两半,所以我希望底部部分在响应时粘在视口的底部.

HTML:

    


        

            

                
Work
                
About
                
Contact
            
        

        

            
Awh Cow! I got no Dribbble.
            
Invite me to Dribbble maybe? Thanks.
        

        Visit Profile

        


    
 
 

CSS:

.cow {
    height: 280px; /* Change this height to change the size of the cow */
    background: url(../images/cow.png) bottom center no-repeat;
    background-size: contain;
}

Narek-T.. 9

使用flexbox)

.cow {
  height: 400px;
  background: blue;
  display: flex;
  justify-content: center;
}

img {
  align-self: flex-end;
}

.cow {
  height: 400px;
  background: blue;
  display: flex;
  justify-content: center;
}

img {
  align-self: flex-end;
}