如何在div的底部中心对齐图像

Question

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

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

HTML:

<div class="main">
    <div class="container">

        <div class="nav">
            <ul>
                <li><a href="index.html" >Work</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>

        <div class="main_text">
            <h1>Awh Cow! I got no <span class="yellow">Dribbble</span>.</h1>
            <p>Invite me to Dribbble maybe? Thanks.</p>
        </div>

        <a href="mailto:hi@gauthamsk.com" class="button">Visit Profile</a>

        <div class="cow"></div>

    </div> <!-- end container -->
</div> <!-- end main -->

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;
}

Answer 1

使用flexbox)

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

img {
  align-self: flex-end;
}

<div class="cow">
  <img src="http://placehold.it/350x150">
</div>