將鏈接和標題水平對齊在包裝器的中心

Question

我需要一些幫助。 我目前正在為Webdesign課程設計一個項目。

我只停留在這一點上。 我想讓圖標與以下標題水平居中對齊（img）請按我那部分的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%添加到這三個圖像中的background-position: 50%即可將它們移到中間。

這里是一個代碼筆： http ://codepen.io/anon/pen/XdQeqp

Answer 2

添加background-position:center; 您想要background-image居中的每個元素的CSS。

Answer 3

您可以這樣做：

#cloudicon_large {
    display:block;
    margin:auto;
    width: 200px;
    height: 10rem;
    white-space: nowrap; /* single line of text */
    text-indent: 100%; /* push text outside */
    overflow: hidden;  /* hide text outside */
    background-image: url(http://lorempixel.com/400/200);
    background-repeat: no-repeat;
}

參見小提琴： https ： //jsfiddle.net/koud5th8/