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

我想将图像与 div 的 底部 对齐，并且还想让 将 水平居中。

这就是我想要完成的(下图)，但在我的元素中，牛下方有一个巨大的缺口。牛的图片被切成两半，所以我希望底部在响应时粘在视口(viewport)的底部。



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:[email protected]" 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;
}

最佳答案

为了使 .main 具有 100% 的高度，您需要确保为包含块计算了高度值。

一种方法是将 height: 100% 分配给 html 和 body 标签。

将 .cow 块元素定位在 .main 底部的一种简单方法是使用绝对定位。首先，将 position: relative 设置为 .main 以设置定位 .cow 的引用点。

将 position: absolute 应用于 .cow 并设置底部偏移量 bottom: 0 ，这将使 .cow 的底部边缘与 .main 的底部边缘对齐。默认情况下，绝对定位将提供缩小以适应宽度，因此设置 left: 0 和 right: 0 以使 .cow 具有 .main 的全宽。由于添加到 .container 的任何填充或边距，这也会处理任何额外的宽度。

您可能希望为 .main 分配一个最小高度，以便为文本、按钮和图像留出足够的空间。如果您足够缩小页面，绝对定位元素可能会与您的文本重叠。

html,
body {
  height: 100%;
  margin: 0;
}
.main {
  height: 100%;
  border: 1px dotted blue;
  position: relative;
  min-height: 500px;
}
.container {
  height: 100%;
  padding: 0 20px;
}
.main_text {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main_text h1 {
  padding-top: 10%;
  margin-top: 0px;
  font-weight: 400;
  font-size: 45px;
  margin-bottom: 0px;
}
.main_text p {
  width: 70%;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 25px;
  margin-bottom: 50px;
}
.buttons {
  display: flex;
  justify-content: center;
}
.button {
  text-align: center;
  margin: 0px 30px;
  color: #000;
  text-decoration: none;
  border: 3px solid #000;
  border-radius: 50px;
  padding: 10px 80px;
  transition: 0.3s background;
  font-size: 15px;
}
.button:hover {
  color: #fff;
  background: #000;
  transition: 0.3s background;
}
.cow {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.cow img {
  align-self: flex-end;
}

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

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

    <div class="buttons">
      <a href="mailto:[email protected]" class="button">Visit Profile</a>
    </div>

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

  </div>
</div>

注意: 浏览器对 flex 的支持在某些浏览器中仍然存在问题并且不向后兼容，请参阅 http://caniuse.com/#feat=flexbox 。如果您只需要内联或内联块元素的水平居中，那么 text-align: center 就足够了。

关于html - 如何在div的底部中心对齐图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34265302/