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;滑塊內粘頁腳

回答

相關問題