css - 正确对齐元素

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

替换 display:inline-block; 在你所有的 service-one, service-two, service-three code> 和 service-four 类与 display:table-cell。这将解决您的问题。

例如，

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

这是 Working Solution .

希望这对您有所帮助。