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的内容进行居中对齐。

DEMO http://jsfiddle.net/Z7dZR/27/

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

Answer 2

我建议采用以下解决方案。首先，在wrapper-div中包装箭头：

 <div class="wrapper arrowWrapper"> 
    <div class="form-arrow">
        <img src="https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif" width="11" height="12">
   </div>
</div>

其次，应用以下CSS：

.arrowWrapper {
    width:209px; /*It's the width of the buttons calculated by the developer tools*/
}

.form-arrow {
    margin:-3px auto 0 auto;
    width:11px; /*width of the arrow*/
}

Answer 3

您只能使用css（从标记中删除箭头图像及其包装）使用:: after选择器。这就是你如何防止重复标记和包装。

.form-header::after{
  content: url('https://www.google.com/help/hc/images/sites_icon_arrow_down_small.gif');
  position: absolute;
  left: 50%;
  bottom:-18px;
}

以下是演示：http://jsfiddle.net/7H5ea/1/

在中间对齐箭头图形并触摸上方栏的底部

3 个答案: