html - 无法在位于另一个 div 中的 div 中底部对齐图像

Question

仍在寻找解决方案:

更新的 jsfiddle 2: http://jsfiddle.net/sharath83/hyaswq1f/6/

**css**
body { margin: 0; font-size: 1em; line-height: 1.4; }
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
.gridContainer {
width: 68.6%;
max-width:960px;
/*max-width: 1232px;*/
padding-left: 0.75%;
padding-right: 0.75%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.responsive-scale-homepage1{
width:100%;
padding-bottom: 66.666666666667%; /* 960px/1440px */
background-image:url(images/homepage-main-1.jpg);
background-size:100%;
background-position:center; /* IE fix */
display:block;
background-repeat:no-repeat;
background-color:#B99394;
}

.clear {
clear:both;
margin:0px;
padding:0px;    
}
.arrow_wrapper{
vertical-align:bottom;
display:table-cell;
}
.db_arrow{
content:url(images/dark-blue-arrow.png);
background-color:#AD3E40;
}

html

        <div class="fluid body responsive-scale-homepage1">
            <div class="arrow_wrapper">
                        <a href="#transparency"><div class="db_arrow"></div></a>
            </div>        
        </div>

    </div>

在上面的 jsfiddle 中，我尝试制作我正在寻找的东西。有一个箭头(朝下，单击它会向下滚动到下一张图片)，将其与背景图片的底部和中间对齐。

但我无法将其底部和中心/中间对齐。它也不适合任何屏幕，移动/标签/桌面。这是一个响应式网络!

谁能帮我解决这个问题，谢谢。

Answer 1

使用background-position:center bottom;

DEMO

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}
.fluid {
  clear: both;
  margin-left: 0;
  width: 100%;
  float: left;
  display: block;
}
.responsive-scale-homepage1 {
  width: 100%;
  padding-bottom: 66.666666666667%;
  /* 960px/1440px */
  background-image: url(http://placekitten.com/g/300/300);
  background-size: 100%;
  background-position: center bottom;
  /* IE fix */
  background-size: auto;
  display: block;
  background-repeat: no-repeat;
  background-color: #A6A6A6;
}
.clear {
  clear: both;
  margin: 0px;
  padding: 0px;
}
.arrow_wrapper {
  position: absolute;
  vertical-align: bottom;
  height: 40%;
  width: 50%;
  top: 80%;
}
.db_arrow {
  content: url(images/dark-blue-arrow.png);
  position: absolute;
  width: 2.5%;
  vertical-align: bottom;
  margin: auto auto;
  background-color: #AD3E40;
}

<div class="fluid body responsive-scale-homepage1">

  <div class="clear arrow_wrapper">
    <a href="#transparency">
      <div class="db_arrow"></div>
    </a>
  </div>

</div>

---

至于对齐箭头，is this what you were looking for?