字幕在定位图像后不工作 [英] Caption does not work after centering image

问题描述

当我在图片上悬停时，图片上会显示一些文字。但是，在定位之后，定位出了问题，文字说明会显示在图片的左边，它也不会居中。

下面是我的

这是我的HTML：

 < div class =col-md-3> 
< p class =caption> 
< img class =profile_picsrc =img / spiropoulos.jpgalt =spy/> 
< span>彩虹和树< / span> 
< / p> 
< / div> 
  

CSS：

  div.clear {
 clear：both; 
} 
 p.caption {
 display：block！important; 
 position：relative！important; 
} 
 p.caption img {
 position：absolute！important 
} 
 p.caption span {
 background：＃000; 
 background：rgba（0,0,0,0.8）; 
 color：white！important; 
 display：none; 
 padding：5px 10px！important; 
 text-align：center; 
 position：absolute！important; 
 bottom：0！important; 
 left：0！important; 
 width：100％！important; 
} 
 p.caption span big {
 font-weight：bold; 
} 
 .profile_pic {
 height：160px; 
 width：200px; 
} 
  

和JS：

  //这是为了使图像居中。
 $（p.caption> img）。each（function（i，img）{
 $ img）.css（{
 position：relative，
 left：（$（img）.parent（）。width（）/ 2） - （$（img）.width ）
}）; 
}）; 
 
 //这是为标题
 //对于每个p.caption的实例
 $（p.caption> div）。each（function（）{
 $（this）
 //添加以下CSS属性和值
 .css（{
 //高度等于图像的高度
height： $（this）.children（img）。height（）+px，
 //宽度等于图片的宽度
width：$（this）.children img）。width（）+px
}）
 //选择这个p.caption的子span
 //添加以下CSS属性和值
 .children（span）。css（
 
 //宽度等于p.caption 
 //但减去20px为callibrate填充
width （this）.width（） -  20 +px）
 
 //如果存在，找到< big>标记
 //然后添加以下div来打破行
 .find（big）。after（'< div class =clear>< / div>'）; 
 
 //将鼠标悬停在p.caption 
 $（p.caption> div）。hover（function（）{
 
 //淡入子级span
 $（this）.children span）。stop（）。fadeTo（400，1）; 
}，function（）{
 //一旦你鼠标移开，淡出它
 $（this）.children（span）。stop（）。delay（600）.fadeOut （400）。 
}）; 
 // End $（this）
}）; 
  

预期结果如下： http://css-plus.com/examples/2010/05/how-to- create-an-image-caption-with-jquery /

解决方案

  div {display ：inline-block; position：relative;} div img {vertical-align：top;} div h2 {position：absolute; left：0; right：0; bottom：0; background-color：rgba（255,255,255,0.5）; text-align：center; margin：0; padding：1.0em 0; / *可选* / display：none;} div：hover h2 {display：block;}这里是一种使用CSS仅显示图片上标题的方法。 

pre class =snippet-code-html lang-html prettyprint-override> < div> < img src =http://lorempixel.com/400/200/nature/> < h2>一些字幕文本< / h2>< / div>

When I hovered on the image, some text would appear over that image. However, after centerizing it, something went wrong with positioning and the text caption is displayed a bit left of the image, it doesn't get centered too.

Below is my code, which contains several pieces of code found on the internet.

Here is my 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>

The CSS:

div.clear { 
  clear: both; 
}
p.caption { 
  display: block !important; 
  position: relative !important;
}
p.caption img { 
  position: absolute !important
}
p.caption span { 
  background: #000; 
  background: rgba(0,0,0,0.8); 
  color: white !important; 
  display: none; 
  padding: 5px 10px !important; 
  text-align: center; 
  position: absolute !important;
  bottom: 0 !important; 
  left: 0 !important; 
  width: 100% !important;
}
p.caption span big {
  font-weight: bold; 
}
.profile_pic{
  height: 160px;
  width: 200px;
}

and the 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)
});

Expected result is something like this: http://css-plus.com/examples/2010/05/how-to-create-an-image-caption-with-jquery/

解决方案

div {
  display: inline-block;
  position: relative;
}
div img {
  vertical-align: top;
}
div h2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.5);
  text-align: center;
  margin: 0;
  padding: 1.0em 0; /*optional*/
  display: none;
}
div:hover h2 {
  display: block;
}

Here is one way of display a caption over an image using CSS only.

<div>
  <img src="http://lorempixel.com/400/200/nature" />
  <h2>Some Caption Text</h2>
</div>

这篇关于字幕在定位图像后不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！