html - 在将容纳我的菜单的 div 中将 Logo 居中时遇到一些问题

Question

我有以下 HTML:

<div id="main-menu">
    <a id="main-menu-logo" href="index.html">
        <span style="color:white;">MY NAME</span>
    </a>
    <div id="main-menu-items">
        ......
    </div>
</div>

以及以下 CSS:

#main-menu{
    margin-left: 1px;
    float: left;
    height: 40px;   
    border: 2px solid black;
    background-color: rgba(0, 0, 0, 0.8);
    width: 120px;
}

#main-menu-items{
    display: none;
}

#main-menu-logo {   
    line-height: 40px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center; 
}

如何让主菜单 Logo 在主菜单中居中？

谢谢

Answer 1

您可以使用 display:table 和 margin 居中。

#main-menu-logo {   
    line-height: 40px;
    display: inline-block;
    margin: 0 auto;
    display: table;
}

更多信息在这里:How to horizontally center a <div> in another <div>?