Question

我即将为我的游戏制作一个网站，它将作为游戏本身的商业广告（一页网站）。

我正处于起始阶段并且正在使用顶部的导航栏（是的，我正在使用Bootstrap）但是我使用的字体真棒字形看起来并不像中间的文本那样正确。体：

正如您在图片中看到的那样，与下面的文字相比，Android和Apple图标偏离中心。我知道这可能是因为我左右的图标让它偏离中心，但我对网络开发还不熟悉所以我只是请求一些帮助来解决这个问题：）

<div class="header">
        <div class="well" style="height: 100%">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target=".navHeaderCollapse"
                                aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse navHeaderCollapse">
                        <ul class="nav navbar-nav navbar-left">
                            <li>
                                <a href="index.html">
                                    <span><img alt="Dynamic Realities" width="42" height="42" src="img/Cogfire-notext.png"></span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav">
                            <li>
                                <a target="_blank" href="#">
                                    <span class="fa fa-android" style="color: #5cb85c; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="#">
                                    <span class="fa fa-apple" style="color: #c0c0c0; font-size: 42px;"></span>
                                </a>
                            </li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a target="_blank" href="http://www.twitter.com/DynRealities">
                                    <span class="fa fa-twitter-square" style="color: #31b0d5; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="http://www.facebook.com/DynamicRealities">
                                    <span class="fa fa-facebook-square" style="color: #204d74; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="http://www.youtube.com/DynamicRealities">
                                    <span class="fa fa-youtube-square" style="color: #c12e2a; font-size: 42px;"></span>
                                </a>
                            </li>
                            <li>
                                <a target="_blank" href="#">
                                    <span class="fa fa-tumblr-square" style="color: #204d74; font-size: 42px;"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

应用以下CSS：

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

Answer 1

看看我的小提琴，只添加填充以使徽标中心

http://fiddle.jshell.net/Jinukurian7/oqyvprxz/

导航栏图标稍微偏离中心

1 个答案: