How can I horizontally align these divs? - html

Question

I have 7 divs in a row on and I can't get the arrows in the middle to be horizontally in the centre of the outer div.
I've tried
top: 50%;
text-align: centre:
margin: 0 auto;
But none of them seem to work. How can I correct this?
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

The simplest solution is the use of vertical-align: middle; on the children of the container:
#instruct > div { vertical-align: middle; }
See this fiddle.

Answer 2

You need to relatively position the element in order for the 'top' property to take effect:
.arrow {
padding: 0px;
display: inline-block;
border: 1px solid pink;
position:relative;
top:-50px; // <---- change this value to suit your preferred positioning.
}