如何通过他的 alt 标签设置以图像为中心的文本

Question

我需要在一个-responsive-图像上添加一个类似“video”的字符串，这也是他的alt标签。 例如：

<img src="my_image" alt="VIDEO">

我应该有我的图像，并在中心（垂直和水平）使用字符串“VIDEO”作为替代。 我不知道如何使用 jquery，我已经搜索了很多，但没有什么是我真正需要的。

看到我不需要 CSS 解决方案！

我有我的理由，但我需要 jquery 解决方案。我试过了，但没有... 如果我写：

<script>

    $(function () {
        var info = $("#informa");
        if (info.length == 0) {
            info = $("<span />").addClass("informa");
            $("body").append(info);
        }
        info.hide();
        $(".hover_text").bind("mouseenter", function () {
            var p = GetScreenCordinates(this);
            info.html(this.alt);
            info.show();
            info.css("width", $(this).width());
            info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
        });
        $(".hover_text").bind("mouseleave", function () {
            info.hide();
        });
    });
    function GetScreenCordinates(obj) {
        var p = {};
        p.x = obj.offsetLeft;
        p.y = obj.offsetTop;
        while (obj.offsetParent) {
            p.x = p.x + obj.offsetParent.offsetLeft;
            p.y = p.y + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName("body")[0]) {
                break;
            }
            else {
                obj = obj.offsetParent;
            }
        }
        return p;
    }
</script>

我的图片是：

                <img src="myimage.jpg" class="hover_text" alt="Collection">

它看起来是正确的，但在顶部。

Answer 1

您需要将绝对定位添加到span，以将其从常规文本流中删除。添加以下行：

info.css("position", "absolute");

然后您的span 会出现在您的图像上方。定位只是正确计算的问题。

---

编辑：

要使其水平居中，只需将text-align: center 添加到元素，因为通过执行info.css("width", $(this).width());，它已经与图像一样宽。对于垂直居中，我假设它可以有多行，所以你需要添加图像高度的一半，然后减去图像上文本高度的一半。

完整代码在这里：http://jsfiddle.net/sQwW6/

编辑的行：

info.css("text-align", "center");
info.css({ "left": p.x, "top": p.y + $(this).height()/2 - info.height()/2 });

Answer 2

Use this modified script:

$（函数（）{ var info = $("#informa"); 如果（信息长度 == 0）{ info = $("").addClass("informa"); $("body").append(info); } info.hide(); $(".hover_text").bind("mouseenter", function () { var p = GetScreenCordinates(this); info.html(this.alt); info.show(); info.css("宽度", $(this).width()); info.css("位置",'绝对'); info.css({ "top": info[0].offsetWidth-p.x, "left": p.y - info[0].offsetHeight }); }); $(".hover_text").bind("mouseleave", function () { //info.hide(); }); }); 函数 GetScreenCordinates(obj) { 变种 p = {}; p.x = obj.offsetLeft; p.y = obj.offsetTop; 控制台.log(p); p.x = $(obj).width()/2; p.y = $(obj).height()/2; 控制台日志（p） 返回 p; }