使用JavaScript的父div中的div div

我想將div放在父div的中間。我能做到的唯一方法是使用margin-left屬性。其計算公式爲：使用JavaScript的父div中的div div

margin-left = (parent.width/2) - (child.width/2)

，但我不能讓它通過JavaScript做是因爲兩件事情：

寬度沒有在樣式定義從而無法通過document.getElementById("child").style.width
document.getElementById("child").offsetWidth沒有給出正確的和未知的原因

正確的寬度

我使用這個代碼，但正如上面所說，這是行不通的

<script type="text/javascript"> 
document.getElementById("fb_share").style.marginLeft = parseInt((document.getElementById("vss_border").offsetWidth/2) - (document.getElementById("fb_share").offsetWidth/2)) + "px"; 
</script>

如果通過CSS任何其他解決方案（但必須是保證金左和沒有寬度變化），請告訴我們。

來源

2011-06-24 SAFAD

我發現你的問題。子寬度設置爲691px，所以一旦它嘗試將fb_share div居中，它只會將它設置爲幾個像素。

所有你需要做的是設置樣式，e.g：

<div id="fb_share" style="width:150px;">

擊穿

沒有錯，你的JavaScript。

孩子與父母的寬度幾乎相同，導致最小中心。

將孩子寬度正確，既然你說的JavaScript都應該工作正常

來源

2011-06-24 08:13:59

http：// pastebin。com/8FE8Y2x8在這個網頁它不工作，我不明白爲什麼O_O – SAFAD

感謝您的鏈接，請參閱我更新的答案。 –

這實際上是一個很常見的問題。這個問題由於不同的瀏覽器對這些東西的理解不同而加劇了。最簡單的東西實際上是無CSS：

<div id="parent" style="width:100%"> 
    <div align="center"> 
     your own stuff 
    </div> 
</div>

不過，如果你需要做的這個純CSS，那麼答案將是這樣的：

在你的CSS：

div.parent { 
    text-align: center; 
    width: 100%; 
} 

#wrapper { 
    margin-left: auto; 
    margin-right: auto; 
    text-align: left; 
} 

div.child { 
    text-align: left; 
}

然後，在你的HTML，你有這樣的事情：

<div class="parent"> 
    <div id="wrapper"> 
    <div class="child"> 
     Your stuff here 
    </div> 
    </div> 
</div>

我用這個（第二）的方式來岑在瀏覽器窗口中瀏覽整個頁面內容（在我的情況下，而不是第一個div，我有<body>。如果你想看看我在哪裏使用這個，看看http://www.ooklnet.com/

來源

2011-06-24 08:11:23

這些解決方案將無法正常工作，尤其是如果有右側帶有填充屬性的浮動元素 – SAFAD

，我不能避免提及jQuery的position function：

$("#myDiv").position({ 
    my: "center", 
    at: "center", 
    of: $('#parent') 
});

來源

2012-08-11 05:43:32 WhyNotHugo

使用JavaScript的父div中的div div

回答

相關問題