如何在 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>

Answer 2

试试这个：

.centerBottom{
  position:fixed;
    bottom:0px;
    left:50%;
}

http://plnkr.co/edit/HAtpO8aR3njgN73hCAA4?p=preview

Answer 3

试试这个解决方案： https://jsfiddle.net/adwc4gwt/

    .cow{
  position:fixed;
  bottom:0px;
  background-color:red;
  width:100%;
}
img{
text-align:center;
display:block;
}

Answer 4

我们可以使用 css3 变换属性因为我们可以使用负百分比属性来对齐底部的图像。

.centerBottom{
  position:fixed;
    bottom:0px;
    left:50%;
    -ms-transform:translate(-50%,0%);
    -moz-transform:translate(-50%,0%);
    -o-transform:translate(-50%,0%);
    -webkit-transform:translate(-50%,0%);
    transform:translate(-50%,0%);
}

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

Answer 5

为了使 .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 分配一个最小高度，以便为文本、按钮和图像留出足够的 space。如果您将页面缩小得足够多，绝对定位元素可能会与您的文本重叠。

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:hi@gauthamsk.com" 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 就足够了。

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

How to align an image at the bottom-center of the div

html

css

position