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 に答える