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）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

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

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

Answer 3

为了使.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: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就足够了。

Answer 4

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

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

Answer 5

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

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

5 个答案: