Question

我正在尝试在标记之上创建一个理论信息框（在这种情况下是一个普通的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");

谢谢大家！

Answer 1

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

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

但通用解决方案是为垂直和水平位置编写一些javascript代码 of #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

的文本时运行此代码

将信息框保持在中心位置并始终位于div的顶部

1 个答案: