-1

这是我的代码：

CSS：

{
    margin      : 0;
    font-family : Arial, Helvetica, sans-serif;
}

html
{
    height : 100%;
}

body
{
    height              : 100%;

    background-color    : #d1e3ec;
    background-image    : url(img/map-v.jpg);
    background-repeat   : no-repeat;
    background-position : top center;
}



#wrapper
{
    min-height : 100%;
    height     : auto !important; /*IE6*/
    height     : 100%; /*IE6*/
    margin     : 0 auto -70px; /* the bottom margin is the negative value of the footer's height */
}


.content
{
    overflow : hidden;
    width    : 200px;
    margin   : 0 auto;
}

#footer, #push
{
    height : 70px; /* .push must be the same height as .footer */
}

#footer
{
    background-color : #019790;
}





#global-container
{
    overflow   : hidden;
    position   : relative;
    width      : 100%;
    min-height : 100%;
}


#slider
{
    background : green;
    height     : 100%;
    position   : absolute;
    left       : 0;
    margin     : 20px 0 0 0;
}

#slide-link
{
    position : absolute;
    top      : 0;
    left     : 0;
    z-index  : 9999;
    height   : 20px;
}

HTML：

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

<script src="js/bootstrap.min.js"></script>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


<div id="global-container">
    <div id="slide-link" style="border:1px solid red; width:100%;"><a href="#" >Click here</a></div>
    <div id="slider" style="border:1px solid red;">
        <div id="wrapper">
            <div class="content">content</div>
            <div id="push"></div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</div>

测试脚本：

$(document).ready(function ()
{
    $("#slide-link").click(function ()
    {

        if ($("#slider").is(":visible"))
        {
            var containerHeight=$("#global-container").height()-25;

            $("#slider").hide("slide", { direction:"down" }, 1000);
            $("#slide-link").animate({top:containerHeight}, 1050)

        } else if ($("#slider").is(":hidden"))
        {
            $("#slider").show("slide", { direction:"down" }, 1000);
            $("#slide-link").animate({top:'0px'}, 950)
        }
    });
});

代码完成了它的工作并且工作正常：它有一个粘性页脚，当您可以按下链接时，它会隐藏/显示它并强制执行。我想要的只是将块 id="slider" 与中心对齐，就像我们在使用 margin:0 auto; 时所做的那样。在不破坏其余功能的情况下。我不知道为什么，但是margin 0 auto；不起作用。

4

3 回答 3

1

将绝对定位的元素放置在其容器的中间：

#slider {
  left: 50%;
  margin-left: -100px; (negative of half of the width of the element)
}
于 2012-08-07T10:48:26.007 回答
1

position: absolute;使用margin:0 auto时的第一件事；不工作。如果你想保留你的 html 代码，试试这个

#slider {
    background : green;
    height : 100%;
    position : absolute;
    width:300px;
    top:0;
    left:50%;
    margin-top:20px;
    margin-left:-150px;
}

希望它对你有用。

于 2012-08-07T10:51:38.810 回答
0

你定位了#slider绝对值。这会将其从关于边距的父元素的流程中取出，并且还将其放置在左侧，因为left: 0;：

#slider {
    position   : absolute;
    left       : 0;
    margin     : 20px 0 0 0;
}

你能做的，是这样的：

#slider {
    position   : inherit;
    margin     : 20px auto 0 auto;
    width:     : 200px;
}

在这种情况下，您必须明确设置宽度，并且必须手动调整高度，或者您使用类似的东西display: table-cell来获得 100% 的高度。

于 2012-08-07T10:43:55.477 回答