Question

我需要一些帮助。我目前正在为我的网页设计课程开展一个项目。

我只是坚持这个而且这个。我想让图标水平居中，标题如下（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%添加到它们的所有三个中以将它们移动到中间。

这里＃s是一个codepen：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/

水平对齐包装中心的链接和标题

3 个答案: