html - 无法将徽标居中

Question

我正在尝试将我的徽标居中放在一个 id 为“logocont”的 div 中，这是我的 css 代码，无论我如何尝试，如果我放置显示块，我的导航栏将停留在左侧，并且徽标将是居中。

#logocont {
    display: inline-block;
    float: none;
    align-content: center;
    text-align: center;
    margin : 0 auto;
    overflow : visible;
}

注意：我正在使用网格布局，我在另一个 css 文件中创建了网格，并且正在链接它。

这是我的 HTML 代码：

<div class="gr-16" id="menu">
    <div id="logocont" class="gr-2">
        <a href="#">
            <img id="logo" src="images/mylogo21.png" alt="Logo" runat="server" />
        </a>
    </div>

    <div id="navbar" class="gr-5">
        <nav>
            <a href="#">
                Home
            </a>
            <a href="#">
                Programmers
            </a>
            <a href="#">
                Request Program
            </a>
        </nav>
    </div>
</div>

标签： htmlcssasp.net

Answer 1

为您的徽标容器使用 display inline-flex

#logocont {
 display: inline-flex;
 align-items: center;
}