T.Doe T.Doe - 3 months ago 17
CSS Question

How can I horizontally align these divs?

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. I'm new to programming sites so can someone help me with how to correct this please. Thank you in advance!

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

The simplest solution is the use of vertical-align: middle; on the children of the container:

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

See this fiddle.