0

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

我已经附加了我的 div，但我没有将它居中，因为我认为这将通过 jquery 完成。

有任何想法吗？

这是我的代码

<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");

感谢大家！

4

1 回答 1

0

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

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

但是通用的解决方案是为#infobox的垂直和水平位置编写一些javascript代码......为了简单，你可以使用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 的文本时运行此代码

于 2013-02-05T21:32:53.337 回答