margin 0 auto;滑块内粘页脚

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

的代码做什么它确实并且工作正常：它有一个粘滞的页脚，并且当你可以按链接时，它就可以了隐藏/显示它并强制。我想要的就是像使用margin：0 auto一样将块id =“slider”对齐到中心。而不会打破其他功能。我不知道为什么，但边缘0自动;不起作用。

来源

2012-08-07 Haradzieniec

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

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

来源

2012-08-07 10:48:26 Shab

您的代码在这里http://jsfiddle.net/vyWTL/3/它的工作原理，但是当它向下滑动时，其宽度会由于未知原因而改变... – Haradzieniec 2012-08-07 11:23:33

这是因为用于放置在中间的负边距， jquery ui正在计算宽度为100px的容器宽度。 – Shab 2012-08-07 12:43:42

1. override overflow：.ui-effects-wrapper的隐藏属性，它在幻灯片放映过程中环绕#slider。 – Shab 2012-08-07 12:45:00

您定位了绝对的#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-07 10:43:55 insertusernamehere

第一件事，当您使用position: absolute;利润率：0汽车;不工作。如果你想保留你的HTML代码，请试试这个

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

希望它对你有用。

来源

2012-08-07 10:51:38

margin 0 auto;滑块内粘页脚

回答

相关问题