Question

我最近使用了一个代码来切换我在stackoverflow上找到的侧边栏。然而，最大的问题之一是在侧边栏切换时将内容与中心对齐。我无法将#B div中的任何内容安排到中间，当它打开或关闭时。这是我的JSFiddle：

现在，我所做的很奇怪。对于#B，我给它提供了以下属性

width: 100%;
margin: 0 auto;

足够简单吧？但它不像ti应该将“.center”div作为中心。它的作用是让它到页面滚动的位置（向右）。这个问题是该页面被告知是100％+ 200px宽。现在，如果我使用计算（100％-200px），它将起作用，但它不会以div为中心。这里发生了什么？

我不确定我是否会以正确的方式进行，但我觉得这不应该是这么困难。

Answer 1

添加以下内容..

CSS：

.center {
    text-align:center;
    width: 100%;
}

#B{
   text-align:center;
}

更新JSFiddle Link

Answer 2

this将对齐中心div。

left: 50%;
margin-left: - 50% of div width;

Answer 3

我仍然不知道你的期望我希望这就是你想要的......

$('button').toggle(
    

function() {
    $('#B').css('left', '0');
}, 
    function() {
        var size = $(window).width();
    var centerdoc = size/2;
    $('#B').css('left', centerdoc);
}
)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#A, #B {
    position: absolute;
}
#A {
    top: 0px;
    width: 50%;
    bottom: 0px;
    background:orange;
}
#B {
    top: 0px;
    left: 50%;
    bottom: 0px;
    background:green;
    width: 100%;
    margin: 0 auto;
}
.center {
width: 30px;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="A"></div>
<div id="B"><button>toggle</button>
    
    <div class="center">
        TEST
    </div>

</div>

只需运行代码段。

通过切换侧栏

3 个答案: