水平中心div

在this page上，我想水平居中放置相對於頁面的主要#container div。通常我會通過添加CSS規則達到這個目的，水平中心div

#container { margin: 0 auto }

然而，這個頁面（我沒有寫）的佈局，使用絕對定位爲#container的最下級元素，所以這個屬性沒有效果。

有什麼辦法可以實現這種水平居中而不用重寫佈局來使用靜態定位？如果這是實現我的目標的唯一方法，那麼使用JavaScript/JQuery就沒有問題。

來源

2011-01-12 Dónal

正在使用腳本行嗎？ – Starx 2011-01-12 07:54:52

@Starx很好的問題，我已經更新了我的帖子，答案是肯定的 – 2011-01-12 08:05:33

@rquinn爲你解答 – Starx 2011-01-12 09:22:21

與@rquinn答案相同，但可以調整爲任意寬度。檢查這個演示

http://jsfiddle.net/Starx/V7xrF/1/

HTML：

<div id="container"></div>

CSS：

* { margin:0;padding:0; } 
#container { 
    width:50px; 
    position:absolute; 
    height:400px; 
    display:block; 
    background: #ccc; 
}

的Javascript

function setMargins() { 
    width = $(window).width(); 
    containerWidth = $("#container").width(); 
    leftMargin = (width-containerWidth)/2;  
    $("#container").css("marginLeft", leftMargin);  
} 

$(document).ready(function() { 
    setMargins(); 
    $(window).resize(function() { 
     setMargins();  
    }); 
});

來源

2011-01-12 09:36:52 Starx

容器寬度爲1024px，因此您可以嘗試給左側值50％和左側餘量：-512px。

來源

2011-01-12 07:52:14

使用Javascript，這會將#container放在瀏覽器窗口的中心位置。

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px'; 
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px';

來源

2011-01-12 08:13:49 Alejandro

您可以使用也使用jQuery：

function setMargins() { 
    var width = $(window).width(); 
    if(width > 1024){ 
     var leftMargin = (width - 1024)/2; 
     $("#container").css("marginLeft", leftMargin);  
    } 
}

然後我把這個代碼$(document).ready事件之後：

$(document).ready(function() { 

    setMargins(); 

    $(window).resize(function() { 
     setMargins();  
    }); 
});

來源

2011-01-12 08:32:17

如果你的主容器使用absolute的位置，你可以使用這個CSS使其居中居中;

#container { 
    position:absolute; 
    width:1000px; /* adjust accordingly */ 
    left:50%; 
    margin-left:-500px; /* this should be half of the width */ 
}

來源

2011-01-12 08:36:58 Sarfraz

很簡單。試試這個

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */ 
} 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto". */ 
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
}

來源

2011-01-12 12:32:58

這種方式最適合我。沒有改變利潤率，但位置。要求： object - > margin-left：0;和位置：相對;

檢查這裏例如：jsfiddle 代碼：

function setObjPosition(container, object) { 
    var containerWidth = $(container).width(); 
    var objectWidth = $(object).width(); 

    var position = (containerWidth/2) - (objectWidth/2); 

    $(object).css('left', position); 
} 

function setPositionOnResize(container, object) { 
    setObjPosition(container, object); 
    $(container).resize(function() { 
     setObjPosition(container, object); 
    }); 
}

用途：

<script type="text/javascript"> 
    $(document).ready(function() { 
     setPositionOnResize(window, "#PanelTeste"); 
    }); 
</script>

它可以在任何容器中居中。

來源

2015-09-03 22:13:13

水平中心div

回答

相關問題