Question

这是我的代码：

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

代码执行它所做的工作并且它工作正常：它有一个粘性页脚，当你可以按下链接时，它会隐藏/显示它并强行执行。我想要的是将block id =“slider”与中心对齐，就像我们在使用margin时所做的那样：0 auto;没有打破其余的功能。我不知道为什么但是保证金0自动;不起作用。

Answer 1

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

#slider {
  left: 50%;
  margin-left: -100px; (negative of half of the width of the element)
}

Answer 2

使用position: absolute;保证金时的第一件事：0 auto;不工作。如果您想保留您的HTML代码，请尝试使用

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

希望它对你有用。

Answer 3

您将#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％的高度。

保证金0自动;用于滑块内的粘性页脚

3 个答案: