如何水平對齊這些 div？

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; }

看到這個小提琴。

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.
}