Question

我在标题下方添加了一个小部件区域，我尝试将其置于徽标下方。

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

这是我的代码：

HTML code：

<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

徽标和小部件区域的

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;
}

Answer 2

用以下内容替换您的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;
    text-align: center; 
}

header#header .logo {        
    box-sizing: border-box;
    text-align: center;
    position: absolute;
}

将标题下方的div居中

2 个答案: