我在做什麼錯嘗試居中這個div？（它的一點點）

我想中心一個div水平對一個標記，因爲你可以在這裏看到http://jsfiddle.net/rKejG/8/，但是它比它應該是更多一點。我在做什麼錯嘗試居中這個div？（它的一點點）

這是我的代碼

$("#infobox").css({ 
    marginLeft: (parseInt($("#content").width(), 10)/2) - (parseInt($("#infobox").width(), 10)/2) + 'px' 
});

然後我意識到，我也許應該補充的半content和infobox並把它們在負利潤，但使得它一大堆糟糕的是：

$("#infobox").css({ 
    marginLeft: '-' + (parseInt($("#content").width(), 10)/2) + (parseInt($("#infobox").width(), 10)/2) + 'px' 
});

Result: margin-left: -16110.5px

我在做什麼錯在這裏？謝謝！

來源

2013-02-06 pufAmuf

你沒有正確關閉你的div標籤。通過W3C驗證程序運行您的HTML並查看您提供的內容。 – thatidiotguy

哎呀，好的，那裏有小錯。修正了。 – pufAmuf

爲什麼在.infobox上設置兩次填充？ – j08691

我清理了html並將類設置爲position: relative。這似乎解決了你的問題。我也出了額外的填充，並刪除了標記類中的額外邊距。我想我在css中做了一些其他更改，您必須比較原始版本。有很多要清理。

Fiddle

UPDATE：現在我回去，相對於絕對定位的元素的父級的位置是很好的做法，但不是必需的，是不是解決了這個問題。信息框類中的額外填充和內容類中的靜態邊距以及未嵌套的html可以解決問題。

[更新] [更新]

基於你有什麼，我認爲你需要用CSS width:100%; padding-top:45%; position:relative的包裝，然後設置你的孩子margin: 0 auto的div如本小提琴http://jsfiddle.net/bfelda/rKejG/22/可以頂邊距設置爲容器當然是你想要的東西。但是我可能會忽略這一點。不管標記所在的位置，是否希望文本位於標記上方？

來源

2013-02-06 22:07:53

謝謝，不過爲什麼你從'＃content'中刪除'width：32px'？當我把它放回去時，我得到了這個結果 - 但仍然不居中：http://i.imgur.com/gnIIkNA.png – pufAmuf

你知道，當我將你的代碼應用到小提琴上時，我沒有看到標記圖像，並不知道它是什麼。我現在修好了，看看你的意思。 –

太好了，謝謝！ :) – pufAmuf

試試這個，我稍微改了一下你的腳本，但是它產生了正確的結果。

http://jsfiddle.net/rKejG/15/

JS代碼：

//for vertical center position 
    var top = +$("#content").offset().top + +$("#content").height(); 
    $("#infobox").css("top", top); 


    //for horizontal center position 
    var left = +$("#content").offset().left - +$("#infobox").width()/2; 
    $("#infobox").css("left", left);

HTML：

<div id="content" class="marker"></div> 
    <div id="infobox" class="infobox">BEER PALACE Restaurant & Pub</div>

我無法弄清楚，爲什麼你用利潤來調整你的「信息框」分區，所以我只是使用絕對定位。無論「內容」div位於頁面的哪個位置，這都應該可以工作。

我也無法弄清楚爲什麼你要將「信息框」div添加到你的「內容」div中，並且如果這應該顯示事件後的「信息框」（根據你的假設命名），你可能不希望它是一個孩子，而是一個兄弟姐妹。當然，讓我知道如果這個假設是錯誤的，我總是可以修改小提琴。

來源

2013-02-06 22:08:29 Jlange

謝謝@Jlange，但是，它仍然不居中：http://i.imgur.com/qOyXFSz.png – pufAmuf

這看起來不像我的小提琴，這是它在Chrome中看起來像我的樣子http：// imgur.com/lWALYc5。你正在使用哪種瀏覽器？ – Jlange

我將其更改爲在標記上方顯示，因爲我正在計劃讓infowindow展開「向上」，以便在懸停時顯示更多信息。關鍵是，在你的例子中 - 就像我原來的版本一樣，它仍然向左多出來。 – pufAmuf

我在做什麼錯嘗試居中這個div？ （它的一點點）

回答

相關問題

我在做什麼錯嘗試居中這個div？（它的一點點）