html - 在标题下方居中放置一个 div

Question

我在标题下方添加了一个小部件区域，并尝试将其居中放置在 Logo 下方。

我尝试在 #header-sidebar 上添加 display: block 和 margin:0 auto 或 text-align: center ，但它不起作用。此外，我尝试更改 HTML 代码的结构，不仅对 CSS 进行调整，而且 #header-sidebar 堆栈仍然在左侧而不是居中。

这是我的代码:

HTML代码:

<header id="header">

    <div class="header-container">

        <a href="javascript:;" class="show-on-phone show-on-tablet" id="phone-toggle-menu"></a>

        <a href="#" class="logo"><img style="vertical-align: middle;" src="#"></a>

        <nav> //here is the navigation, hidden in mobile view </nav>

        <div id="header-sidebar" class="header-widget-area">
            <div class="textwidget">
                //some widget here
            </div>

            <div class="mlp_language_box">
                // some other widget here
            </div>
        </div>
    </div>

</header>

CSS 代码:

header#header {
    position: relative;
    z-index: 300;
    height: 70px;
    line-height: 70px;
    display: block;
}

header#header #phone-toggle-menu {
    left: 20px;
    margin-left: 0;
    position: absolute;
}

header#header .header-container {
    max-width: 1200px;
    margin: 0 auto;
}

header#header .logo {
    width: 100%;
    float: none;
    box-sizing: border-box;
    text-align: center;
    position: absolute;
}

Answer 1

Logo 和小部件区域的

display:table 和 margin:auto 就可以解决问题...因此单独的切换按钮可以保持绝对。

header#header {
    position: relative;
    z-index: 300;
    height: 70px;
    line-height: 70px;
    display: block;
}

header#header #phone-toggle-menu {
    left: 20px;
    margin-left: 0;
    position: absolute;
}

header#header .header-container {
    max-width: 1200px;
    margin: 0 auto;
}

header#header .logo {
    box-sizing: border-box;
    display: table;
    margin: auto;
}

header #header-sidebar{
    display: table;
    margin: auto;
}