Javascript 图像居中后标题不起作用

当我在图像上悬停时，一些文本会出现在该图像上。然而，在将其居中化之后，定位出现了问题，文本标题显示在图像的左侧，它也没有居中

下面是我的代码，其中包含在互联网上找到的几段代码

这是我的HTML：

<div class="col-md-3">
  <p class="caption">
    <img class="profile_pic" src="img/spiropoulos.jpg" alt="spy" />
    <span>Rainbow and Tree</span>
  </p>
</div>

而JS：

// this is to center the image
$("p.caption>img").each(function(i, img) {
    $(img).css({
        position : "relative",
        left : ($(img).parent().width() / 2) - ($(img).width() / 2)
    });
});

// this is for the caption
// For each instance of p.caption
$("p.caption>div").each(function() {
    $(this)
    // Add the following CSS properties and values
    .css({
        // Height equal to the height of the image
        "height" : $(this).children("img").height() + "px",
        // Width equal to the width of the image
        "width" : $(this).children("img").width() + "px"
    })
    // Select the child "span" of this p.caption
    // Add the following CSS properties and values
    .children("span").css(

    // Width equal to p.caption
    // But subtract 20px to callibrate for the padding
    "width", $(this).width() - 20 + "px")

    // find the <big> tag if it exists
    // And then add the following div to break the line
    .find("big").after('<div class="clear"></div>');

    // When you hover over p.caption
    $("p.caption>div").hover(function() {

        // Fade in the child "span"
        $(this).children("span").stop().fadeTo(400, 1);
    }, function() {
        // Once you mouse off, fade it out
        $(this).children("span").stop().delay(600).fadeOut(400);
    });
    // End $(this)
});

//这是为了使图像居中
$（“p.caption>img”）。每个（函数（i，img）{
$（img）.css({
职位：“相对”，
左：（$（img.parent（）.width（）/2）-（$（img.width（）/2）
});
});
//这是标题
//对于p.caption的每个实例
$（“p.caption>div”）。每个（函数（）{
$（本）
//添加以下CSS属性和值
.css({
//高度等于图像的高度
“高度”：$（this.children（“img”）.height（）+“px”，
//宽度等于图像的宽度
“宽度”：$（this.children（“img”）.width（）+“px”
})
//选择此p标题的子项“范围”
//添加以下CSS属性和值
.children（“span”）.css(
//宽度等于p
//但是减去20px就可以对填充进行校准
“宽度”，$（this.width（）-20+“px”）
//查找标记（如果存在）
//然后添加以下div以断开该行
.在（“”）之后查找（“大”）；
//当您将鼠标悬停在p.caption上时
$（“p.caption>div”）.hover（函数（）{
//在孩子的“跨度”中逐渐消失
$（this.children（“span”）.stop（）.fadeTo（400,1）；
}，函数（）{
//一旦鼠标离开，它就会消失
$（this.children（“span”）.stop（）.delay（600）、fadeOut（400）；
});
//完$（本）
});

---

预期结果如下：

尝试使用

css

:hover

，

：after

p:hover:after{
内容：“彩虹与树”；
字体系列：Arial；
字体大小：11px；
背景：#000；
文本对齐：居中；
位置：相对位置；
颜色：#fff；
顶部：-4px；
左：-99px；
z指数：1；
不透明度：.75；
}

div{
显示：内联块；
位置：相对位置；
}
部门经理{
垂直对齐：顶部；
}
分区h2{
位置：绝对位置；
左：0；
右：0；
底部：0；
背景色：rgba（255255,0.5）；
文本对齐：居中；
保证金：0；
填充：1.0em 0；/*可选*/
显示：无；
}
分区：悬停h2{
显示：块；
}
以下是仅使用CSS在图像上显示标题的一种方法。

一些标题文本

由于将

div

嵌套在

p

中，这在技术上是HTML规范所不允许的，因此

p

标记会过早关闭，并且标记的行为不符合预期。将

p

替换为

div

，这可能会解决问题。我认为您也可以在CSS中完成这项工作。。。您正在使用引导吗？

div

元素不是

p

element@guest271314你说的是JS代码？这是我最近的一次尝试，如果我使用

p.caption

的话，只是它不会再起作用了。好了，伙计们。我用期望的结果更新了我的问题。不！！！！标题应该是内容的一部分，将其隐藏在伪元素中并没有真正意义。@MarcAudet“不！！！！标题应该是内容的一部分，将其隐藏在伪元素中并没有真正意义。”？guest我将接受Marc的答案，因为结果更接近我的代码生成的结果。出于这个原因，我也将投票给你的另一个好答案。图像标题是实际内容，这意味着它应该出现在DOM中。伪元素不是DOM的一部分，例如，这意味着搜索引擎永远不会为这些单词编制索引。Pseuodo元素应该只包含纯装饰性或可选的文本。@MarcAudet“图像标题是实际内容，这意味着它应该出现在DOM中。伪元素不是DOM的一部分，这意味着，例如，搜索引擎永远不会为这些词编索引。”不确定需求是如何扩展到包含

DOM

元素或搜索引擎索引的？请参阅“当我在图像上悬停时，图像上方会出现一些文本”处的OP。这是实际要求吗？“Pseuodo元素应仅包含纯装饰性或可选的文本。”？链接到规范，包含“应仅包含”的文档？

// this is to center the image
$("p.caption>img").each(function(i, img) {
    $(img).css({
        position : "relative",
        left : ($(img).parent().width() / 2) - ($(img).width() / 2)
    });
});

// this is for the caption
// For each instance of p.caption
$("p.caption>div").each(function() {
    $(this)
    // Add the following CSS properties and values
    .css({
        // Height equal to the height of the image
        "height" : $(this).children("img").height() + "px",
        // Width equal to the width of the image
        "width" : $(this).children("img").width() + "px"
    })
    // Select the child "span" of this p.caption
    // Add the following CSS properties and values
    .children("span").css(

    // Width equal to p.caption
    // But subtract 20px to callibrate for the padding
    "width", $(this).width() - 20 + "px")

    // find the <big> tag if it exists
    // And then add the following div to break the line
    .find("big").after('<div class="clear"></div>');

    // When you hover over p.caption
    $("p.caption>div").hover(function() {

        // Fade in the child "span"
        $(this).children("span").stop().fadeTo(400, 1);
    }, function() {
        // Once you mouse off, fade it out
        $(this).children("span").stop().delay(600).fadeOut(400);
    });
    // End $(this)
});