Question

我正在尝试将我的徽标放在导航栏中，我正在使用Bootstrap。

当我检查元素并将鼠标悬停在包含徽标的标签上时，我可以看到一个水平和垂直居中的框。但是，由于某种原因，我的徽标位于它下面。

以下是测试网站的链接。

http://test.envera.co.uk/

以下是我的标题代码。

<div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="fa fa-bars"></span>
                        </button>
                        <a class="navbar-brand" href="index.html">
                            <img id="logo-header" src="<?php echo get_template_directory_uri();  ?>/img/Envera_Telecom_Logo_Final.png" alt="Logo">
                        </a>
                    </div>

Answer 1

将徽标css更新为

#logo-header {
    max-width: 100%;
    max-height: 100%;
}

并从.navbar-brand删除填充

Answer 2

从锚标记中删除类navbar-brand。这将解决问题。

<a href="index.html">
    <img id="logo-header" src="http://test.envera.co.uk/wp-content/themes/html5blank-stable/img/Envera_Telecom_Logo_Final.png" alt="Logo">
</a>

Answer 3

更改

的CSS

.header-v3 .navbar-brand

位于header.css中

.header-v3 .navbar-brand {
    z-index: 1;
    padding: 0px 10px 10px 10px;
    position: relative;
}

导航栏引导程序中的中心徽标

3 个答案: