html - 如何水平对齐这些 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; }

查看此 fiddle .