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

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

一种方法是为html和body标签指定height: 100% 。

将.cow块元素放在.main底部的简单方法是使用绝对定位。 首先，设置position: relative to .main来设置定位的参考点.cow 。

适用position: absolute到.cow并设置底部偏移bottom: 0 ，这将对齐的底部边缘.cow到该的.main 。 绝对定位将给予默认情况下，收缩至合适宽度，所以设置left: 0和right: 0给.cow的整个宽度.main 。 由于添加了.container任何填充或边距，这也会处理任何额外的宽度。

您可能希望为.main指定最小高度，以便为文本，按钮和图像.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属性，因为我们可以使用负百分比属性来对齐底部的图像。

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