html - 在包装器的中心水平对齐链接和标题

Question

我需要一些帮助。我目前正在为我的网页设计类(class)做一个元素。

我只坚持这一点。我想让图标与下面的标题水平居中 (img) press me我那部分的 html:

<!-- Three pillars of the company -->
 <section id="pillars" class="clearfix">
      <h2 class="structural">Three pillars</h2>
      <div class="wrapper">
           <section class="clearfix" id="border">
                <a href="services.html" id="cloudicon_large">Cloud</a>
                <h3>Cloud Computing</h3>
                     <p>
                          I'm a paragraph. Click here to add your own text and  edit me. I’m a great place for you to tell a story and let your users know a little more about you.
                     </p>
           </section>
           <section class="clearfix" id="border">
                <a href="services.html" id="desktop_large">Desktop</a>
                <h3>Security</h3>
                     <p>
                          I'm a paragraph. Click here to add your own text and  edit me. I’m a great place for you to tell a story and let your users know a little more about you.
                     </p>
           </section>
           <section class="clearfix">
                <a href="services.html" id="phone_large">Phone</a>
                <h3>Mobility</h3>
                     <p>
                          I'm a paragraph. Click here to add your own text and  edit me. I’m a great place for you to tell a story and let your users know a little more about you.
                     </p>
           </section>
      </div>
 </section>

我的CSS:

/* CSS for Pillars section */

#pillars .wrapper > section {
    overflow: hidden;
    padding: 1rem 1rem 1rem 1rem;
    margin-top: 1rem;
    margin-bottom: 4rem;
    text-align: center;
}

#pillars a {
    margin: 0 auto;
}

#pillars .wrapper > section h3 {
    font: normal normal normal 17px/1.4em 'Open Sans', sans-serif;
    text-align: center;
    border-bottom: 1px solid black;
    padding-bottom: 1rem;
}

#pillars .wrapper > section p {
    font: normal normal normal 12px/1.4em 'Open Sans',sans-serif;
    text-align: justify;
    margin-top: 1rem;
}

/* CSS for icons in pillars section */

#cloudicon_large {
    display: block; /* only block level elements can have width / height */
    height: 10rem;
    white-space: nowrap; /* single line of text */
    text-indent: 100%; /* push text outside */
    overflow: hidden;  /* hide text outside */
    background-image: url(../img/cloud_folder_large.png);
    background-repeat: no-repeat;
}

#desktop_large {
    display: block; /* only block level elements can have width / height */
    height: 10rem;
    white-space: nowrap; /* single line of text */
    text-indent: 100%; /* push text outside */
    overflow: hidden;  /* hide text outside */
    background-image: url(../img/desktop_small.png);
    background-repeat: no-repeat;
}

#phone_large {
    display: block; /* only block level elements can have width / height */
    height: 10rem;
    white-space: nowrap; /* single line of text */
    text-indent: 100%; /* push text outside */
    overflow: hidden;  /* hide text outside */
    background-image: url(../img/phone_large.png);
    background-repeat: no-repeat;
}

如您所见，我创建了链接并用图像替换了文本(css 图像替换)。

有一个要求:流体/灵活设计，因此没有相对/绝对定位

提前致谢!

Answer 1

由于这些图像是跨越整个宽度的元素中的背景图像，您可以简单地向所有三个图像添加 background-position: 50% 以将它们移动到中间。

这是一个代码笔:http://codepen.io/anon/pen/XdQeqp