jquery - 使信息框居中并始终位于div顶部

我正在尝试在标记（在本例中为普通div）上方创建一个理论信息框，该信息框将始终位于标记上方。我还计划在添加新内容时使信息框的宽度和高度增加，但是该信息框必须始终位于div上方。

我已经添加了div，但是我没有将其居中，因为我认为这将通过jquery完成。

有任何想法吗？

Heres my code

<div id="content" class="marker"><div>

    <div id="infobox" class="infobox">Some Venue Name<div>

.marker
{
    cursor: pointer;
    margin-top: 100px;
    margin-left: 100px;
    height: 41px;
    width: 32px;
    background-image:url('http://i.imgur.com/WFXIqly.png');
}
.infobox{
    margin-top: -50px;
    position:absolute;
    background-color: black;
    color: white;
    padding: 10px;
    max-width: 150px;
    max-height: 20px;
    pverflow: hidden;
}

$("#infobox").appendTo("#content");

感谢大家！

最佳答案

对于水平中心，您应该设置

    .infobox{
    margin:0 auto;  /*FOR HORIZONTAL CENTER */
  max-width: 150px;
    max-height: 20px;
    }

但是通用的解决方案是为垂直和水平位置编写一些javascript代码
#infobox的...为了简化操作，您可以使用jQuery

//for vertical center position

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

//for horizontal center position

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

并在每次更改#infobox的文本时运行此代码