I want to make my list items align like the dropdown menu shown at the bottom of the picture.
The items in the dropdown are centered and aligned vertically in a single line. How can I achieve this effect?
Below is the code snippet I am using:
<div class="footer">
<div class="outer">
<div class="container">
<ul id="insurances">
<li><a href="conditions-form.html"><img src="img/estate-insurance.png">Property Insurance</a></li>
<li><a href="conditions-form.html"><img src="img/tourist-insurance.png">Travel Insurance</a></li>
<li><a href="conditions-form.html"><img src="img/health-insurance.png">Health Insurance</a></li>
<li><a href="conditions-form.html"><img src="img/car-insurance.png">Car Insurance</a></li>
<li><a href="conditions-form.html"><img src="img/assistance-insurance.png">Assistance Insurance</a></li>
<li><a href="conditions-form.html"><img src="img/NNW-insurance.png">Accident Insurance</a></li>
<li><a href="conditions-form.html"><img src="img/law-insurance.png">Legal Protection</a></li>
</ul>
<p>Looking for</p>
<a class="insurance-type">
<span>Property Insurance</span>
</a>
<div clas="clear"></div>
</div>
</div>
And here is the corresponding CSS:
.footer .outer .container ul {
position: absolute;
border:none;
padding: 0;
margin: 0;
bottom:110px;
left:0;
right:0;
display:none;
}
.footer .outer .container ul li a img {
height: 25px;
margin-right: 20px;
}
.footer .outer .container ul li {
padding:0;
margin:0;
list-style: none;
}
.footer .outer .container ul li a {
color: #fff;
text-decoration: none;
font-size:21px;
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: left;
margin: 0 auto;
display:block;
height: 70px;
line-height: 70px;
}
Any suggestions on how to achieve this layout would be greatly appreciated. Thank you!