html - 将箭头图形居中对齐并触及上方栏的底部

Question

将我的箭头图形居中对齐并触及上方栏底部的最佳方法是什么？

现在它左对齐，顶部栏和箭头之间有空间。

查看我的 jsfiddle:http://jsfiddle.net/huskydawgs/Z7dZR/26/

这是我的 HTML

<!-- Start Form -->
<div class="wrapper-twocol">
<div class="twocol_row">
<div class="twocol_cell1">
<div class="form-header">Watch Video</div>
    <div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">
    </div>

<div class="twocol_cell2">
<div class="form-header">Watch Video</div>
    <div class="form-arrow"><img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12"></div>
<img src="http://www.real.com/resources/wp-content/uploads/2013/06/stream-video1.jpg" width="386" height="279">

</div>
</div>
<!-- End Form -->

这是我的 CSS:

/* 2 Column  */
.wrapper-twocol {
    position:relative;
    width:100%;
    border: none;
    margin: 20px 0 37px 0;
}

    .twocol_row {
    height:100%;
    white-space:nowrap;
    }

    .twocol_cell1, .twocol_cell2 {
        height:100%;
        width:47%;
        display:inline-block;
        white-space:normal;
        vertical-align: top;
        margin-left: 6%;
    }
        .twocol_cell1{
            margin-left: 0;
        }

.form-header {
    background:#939598;
    margin:0;
    padding: 10px 0 10px 0;
    color: #fff;
    font-family: 'SegoeRegular', Helvetica, Arial, sans-serif;
    font-size: 21px;
    text-align: center;

}

.form-arrow {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

Answer 1

稍微改变一下造型。你的 div 是它父级的整个宽度，所以你只需要居中对齐 div 内容。

演示 http://jsfiddle.net/Z7dZR/27/

.form-arrow {
    margin: 0 auto;
    text-align: center;
    margin-top: -2px;
}