javascript - 在元素下方对齐 div 并水平居中

Question

假设我有一个这样的上下文菜单

    |here|there|somewhere|

这很简单

<ul>
    <li>here</li>
    ...
<ul>

和 onclick 我想添加一个像这样的图像的 div：

    |here|there|somewhere|
            ^

在元素的中间水平对齐，在其下方垂直对齐。我该怎么做？

Answer 1

有很多方法，特别是取决于你想要做什么，但这里有一个：

$("li").on('click', function () {
   $("<div>").width($(this).width())
      .css({'display': 'inline-block', 'text-align': 'center'})
      .text('here')
      .appendTo(this);
});

Answer 2

我会通过css将图像作为背景添加到菜单项中，然后将其放置在底部的中心：

CSS：

li { background: url(your_image_url) no-repeat center bottom; }

Javascript：

document.getElementById('id').style.background = "url(your_image_url) no-repeat center bottom";

查询：

$('#id').css('background','url(your_image_url) no-repeat center bottom');

Answer 3

嘿，伙计，为此目的使用 jquery offset() 函数！

$("ul li").click( function() {
var pos = $(this).offset();
var width = $(this).width();
var height = $(this).height();
var halfW = width/2;
var widthOfImageDiv = 20; // assume that div with image has width of 20px
var halfWIMG = widthOfImageDiv/2;
var posLeft = pos.left+halfW-halfWIMG;
var posTop = pos.top+height;
$(".imageDiv").css({ 'position':'absolute', 'top':posTop+"px", 'left':posLeft+"px" });
$(".imageDiv").show();
});