Question

嘿伙计们，我一般都是css的新手，我在定位几个社交图标方面遇到了一个小问题，基本上，我想要实现以下内容：

社交图标应该居中。
社交图标应该触及主容器div的顶部。

我实现的第一个目标，但是我遇到了困难。，下面是HTML和CSS代码：

HTML ::

    <section id="contact-us" class="contact-us">
                <div class="overlay">

                    <div class="social-icons">
                        <ul>
                            <li>
                                <a href=""> 
                                    <i class="fa fa-twitter"></i>
                                </a>
                            </li>
                            <li>
                                <a href="">
                                    <i>|</i>
                                </a>
                            </li>
                            <li>
                                <a href=""> 
                                    <i class="fa fa-facebook"></i>
                                </a>
                            </li>
                        </ul>
                    </div>

        </div>
</section>

CSS ::

html,body {
    height: 100%;
}

.contact-us {
    background: url(http://wallpaperswiki.com/wallpapers/2012/12/Abstract-Color-Point-1050x1400.jpg);
    height: 100%;
}

.overlay {
    height: 100%;
    background: rgba(146,39,143,.5);
}

.social-icons {
    text-align: center;
}

.social-icons ul {
    list-style: none;
    padding:0;
    margin: 0;
    display: inline-block;
}

.social-icons ul li {
    margin-left: 5px; 
    margin-right: 5px; 
    display: inline-block;
}

.social-icons li a {
    color: #fff;
}

.social-icons li a i {
    font-size: 2em;
}

FIDDLE HERE

注意社交图标是如何不触及主容器的顶部的。实际上，所有三个元素，2个社交图标以及它们之间的线应该触及主容器的顶部。

ON检查 ::我正在使用bootstap，如果我将social-icons上的行高设置为0，则bootstap的默认行高为1.42857社会图标越来越接近顶部，几乎解决了我的问题。但仍然不是所有三个图标都触及顶部？为什么？我该如何解决这个问题？

编辑 ::

我想要的输出如下： the output i want

谢谢。

亚历-Z

如何将图标添加到主容器的顶部

0 个答案: