Aligning elements properly - css

Question

I cannot for the life of me figure out how to make the images within the following code align horizontally across the top. I also need to get the h1's to align the same as well. It seems to behave oddly to me when I use the vertical-align property.
HTML:
<div class='services-banner'>
<div class='service-one'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a17287e4b09448823f89f6/1369535111697/Link%20Icon.png'>
<h1><b>Social Media Marketing</b></h1>
<p class='service-description'>Engage your audience with organic brand growth. We work to connect with your customers through social media and humanize your brand. Our team takes your social media campaign from strategy to action! </p>
</div>
<div class='service-two'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a17290e4b0941ebb86cb78/1369535120489/Web%20Design%20Icon.png'>
<h1><b>Website Design</b></h1>
<p class='service-description'>We offer customized website design to scale your content across platforms. Our design team will produce a clean and focused website. We include search engine optimization, analytics and a intuitive platform to keep your content relevant. </p>
</div>
<div class='service-three'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a1728be4b034b67e50db59/1369535115782/Search%20Engine%20Marketing%20Icon.png'>
<h1><b>Search Engine Marketing</b></h1>
<p class='service-description'>Visibility is everything. Project your brand across the internet with search engine marketing. Our team will customize and execute a potent add campaign. We offer customized text or visuals for your brand! </p>
</div>
<div class='service-four'>
<img align='top' src='http://static.squarespace.com/static/515a53e1e4b063d29d1bd369/t/51a17289e4b0f957dd565595/1369535113477/Review.png'>
<h1><b>Reputation Management</b></h1>
<p class='service-description'>Studies show, product endorsements effect consumer behavior. Our team uses the latest in SEO technology to scour the internet in search of negative press. We create a plan of action to manage reviews by responding to consumers concerns. </p>
</div>
CSS:
.services-banner {
width: auto;
height: auto;
display: block;
position: absolute;
text-align:center;
overflow: hidden;}
.service-description {
text-align:left;
font-weight: 400;
}
.service-one {
width: 225px;
height: 500px;
display:inline-block;
padding: 10px;
background-color: transparent;
}
.service-two {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}
.service-three {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}
.service-four {
width: 225px;
height: 500px;
display: inline-block;
text-align:center;
padding: 10px;
background-color: transparent;
}
.services-banner img {
width: 160px;
}
You can see a live example at http://www.ampfly.sqsp.com on the home page. Please excuse the unfinished-ness of the site, its a work-in-progress. Thanks!

Answer 1

Replace display:inline-block; in all your service-one, service-two, service-three and service-four classes with display:table-cell. This will solve your issue.
For instance,
.service-one, .service-two, .service-three, .service-four{
display: table-cell;
}
Here is the Working Solution.
Hope this Helps.