正确对齐元素

Question

我一生都无法弄清楚如何使以下代码中的图像在顶部水平对齐。我还需要让 h1 也对齐。当我使用 vertical-align 属性时，它的行为对我来说似乎很奇怪。

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;
}

您可以在主页上的http://www.ampfly.sqsp.com 看到一个实时示例。请原谅该网站的未完成，它正在进行中。谢谢！

Answer 1

将所有service-one、service-two、service-three 和service-four 类中的display:inline-block; 替换为display:table-cell。这将解决您的问题。

例如，

.service-one, .service-two, .service-three, .service-four{
    display: table-cell;
}

这里是Working Solution。

希望对您有所帮助。