Question

I’m trying to create a theoretical infobox above a marker (in this case an ordinary div) which will always stay centered above a marker. I’m also planning on making the infobox grow in width and height when new content is added in, however it must always be centered above the div.

I’ve appended my div, but I haven’t centered it as I assume this will be done via jquery.

Any ideas?

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

Thanks everyone!

Answer 1

for horizontal center you should set

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

But generic solution is to write some javascript code for vertical and horizontal positions
of #infobox…to do it easy you can use 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'})

and run this code every time when you change text of #infobox