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和service-four课程中的display:table-cell。这将解决您的问题。

例如，

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

这是Working Solution。

希望这有助于。

正确对齐元素

1 个答案: