Question

我连续有7个div，我不能让中间的箭头水平位于外部div的中心。

我试过

top: 50%;

text-align: centre:

margin: 0 auto;

但它们似乎都不起作用。我是编程网站的新手，所以有人可以帮我解决这个问题。提前谢谢！

HTML：

<div id="instruct">

    <div align="center" class="category">
    <img src="http://www.devo.co.uk/wp-content/uploads/2016/07/1-DEVO.png" width="150" height="auto"/>
        <p class="ititle">1. You Order</p>
        <p class="itext">Shop and browse your favorite<br>brands from your local shops</p>
    </div>

    <div align="center" class="arrow">
        <img src="http://www.devo.co.uk/wp-content/uploads/2016/08/rightgreyarrow.png" width="50" height="auto"/>
    </div>

    <div align="center" class="category">
        <img src="http://www.devo.co.uk/wp-content/uploads/2016/07/2-DEVOnewblue.png" width="175" height="auto"/>
        <p class="ititle">2. We Collect</p>
        <p class="itext">Our drivers make their way to your<br>local shop</p>
    </div>

    <div align="center" class="arrow">
        <img src="http://www.devo.co.uk/wp-content/uploads/2016/08/rightgreyarrow.png" width="50" height="auto"/>
    </div>

    <div align="center" class="category">
        <img src="http://www.devo.co.uk/wp-content/uploads/2016/07/3-DEVOcolour.png" width="95" height="auto"/>
        <p class="ititle">3. We Deliver</p>
        <p class="itext">Our drivers make their way to<br>your location</p>
    </div>

    <div align="center" class="arrow">
        <img src="http://www.devo.co.uk/wp-content/uploads/2016/08/rightgreyarrow.png" width="50" height="auto"/>
    </div>

    <div align="center" class="category">
        <img src="http://www.devo.co.uk/wp-content/uploads/2016/07/4-DEVO.png" width="65" height="auto"/>
        <p class="ititle">4. You Enjoy</p>
        <p class="itext">Track and receive your order<br>in as little as 30 minutes</p>
    </div>

</div>

CSS：

#instruct {
    height: auto;
    width: 100%;
    background-color: transparent;
    border-bottom: 3px solid #fd0e35;
}
.category {
    padding: 40px 50px 10px 50px;
    display: inline-block;
}
.arrow {
    padding: 0px;
    display: inline-block;
    border: 1px solid pink;
}
.ititle {
    margin-top: 20px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    color: #a6a6a6;
}
.itext {
    font-size: 13px;
}

Answer 1

最简单的解决方案是在容器的子容器上使用vertical-align: middle;：

#instruct > div { vertical-align: middle; }

请参阅此fiddle。

Answer 2

您需要相对定位元素才能使'top'属性生效：

.arrow {
  padding: 0px;
  display: inline-block;
  border: 1px solid pink;
  position:relative;
  top:-50px; // <---- change this value to suit your preferred positioning.
}

如何水平对齐这些div？

2 个答案: