I am struggling to make the images in the following code align horizontally across the top and also need to align the h1's in the same way. I have tried using the vertical-align property, but it seems to behave oddly to me.
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,
.service-two,
.service-three,
.service-four{
width: 225px;
height: 500px;
display: inline-block;
padding: 10px;
background-color: transparent;
}
.services-banner img {
width: 160px;
}
You can view a live example at on the home page. Please forgive the unfinished state of the site as it is still a work-in-progress. Thank you!