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