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?

Answer 2

我不知道你的箭头图像的尺寸，但这里有一个解决方案。

Fiddle

在position: absolute; bottom: 0;添加了.arrow-wrapper以获取底部的箭头，然后在我的db_arrow课程中指定了宽度并使用margin: auto;将图像居中。< / p>

body {
    margin: 0;
    font-size: 1em;
    line-height: 1.4;
}
.fluid {
    clear: both;
    margin-left: 0;
    width: 100%;
    float: left;
    display: block;
    position: relative;
}
.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 {
    position: absolute;
    width: 100%;
    bottom: 0;
}
.db_arrow {
    content:url(images/dark-blue-arrow.png);
    width: 200px;
    margin: auto;
    background-color:#AD3E40;
}

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

无法在div内部对齐图像，div位于另一个div内

2 个答案: