logo标签列表

如何将图像底部居中对齐到 div？

htmlcssposition
4
我想将图像与 div 底部对齐，并水平居中。这是我想要实现的效果（下面有图片），但在我的项目中，牛下方有一个巨大的间隙。牛的图片被切成两半，因此我希望底部部分能够粘贴到视口底部并具有响应性。

enter image description here

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;
}
3
请展示你的 CSS。 - Rohit Azad Malik
1
添加一些示例代码，以便更容易地进行帮助。 - soorapadman
可能是重复的问题：如何使用CSS将div的内容对齐到底部？ - Sina
5个回答
10

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

目前最好的方法。我应该更深入地了解flexbox。 - Daan
我已更新问题并添加了更多的代码。使用flexbox，我将其居中并与div底部对齐。但这里的.div未占用“main” div的高度，这导致图像/ div在底部留下空白。 - Gautham SK
你的标记真的很糟糕。为什么要在不需要的地方创建 flex？好吧，这是你的选择，但为什么不使用 background-image 代替 <img> 呢？在这种情况下，这是一个好的解决方案。 - Narek-T
抱歉标记不好，我很匆忙。我已经更新了代码并重新构思了问题，以防我的问题不够清楚。 - Gautham SK
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 的支持仍然有bug，并且不向后兼容，详见 http://caniuse.com/#feat=flexbox。如果你只需要让内联或者内联块元素水平居中，使用text-align: center就足够了。

谢谢！但是当我这样做时，会出现水平滚动条。 - Gautham SK
水平滚动条在哪个元素上？ - Marc Audet
.cow div。我忘了提到主div里面有一个容器。 - Gautham SK
请检查 "dribbble.html" 文件。 - Gautham SK
1
你的.container块有左/右填充（20px），这导致了滚动。我通过使用左/右偏移量来计算.main的宽度，而不是100%的宽度来解决了这个问题。现在应该一切正常了。 - Marc Audet
显示剩余2条评论
1
我已经编辑了这个问题。我已经成功地将它定位在 div 中。但是如何将 div 定位到底部？ - Gautham SK
图片在底部没有水平居中。 - Gautham SK
@GauthamSK 我只是想向您展示底部位置，因为这是剩下的问题。 - younes sofiane
1
我们可以使用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>

这在所有浏览器中都支持吗？ - Gautham SK
0
尝试这个解决方案： https://jsfiddle.net/adwc4gwt/ 
    .cow{
  position:fixed;
  bottom:0px;
  background-color:red;
  width:100%;
}
img{
text-align:center;
display:block;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接