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

Answer 2

您需要的元素，以相对位置的 '顶' 属性生效：

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