当悬停，javascript时出现在图像上的文本

Question

我正在为我在Uni上编写的编码课程创建一个网站，其中一个要求是使用JavaScript。我已添加它，以便当您将鼠标悬停在网站上的图像上时，文本将显示在图像上。但是，我想让文本变成白色，我希望它能够居中，我已经尝试了所有内容，但文本不会从每个图像的左上角开始。有小费吗？

＆＃13;

＆＃13;

      $('.image-container').on('mouseenter', function(){
       $(this).children('div').show();
      });

      $('.image-container').on(
        'mouseleave',
        function(){
          $(this).children('div').hide();
        }
      );

＆＃13;

      div#image-wrap {
       background-color: white;
       padding: 0;
       margin: auto;
       text-align: center;
      }
      div.image-column {
       width: 31.5%;
       background-color: white;
       display: inline-block;
       margin: 0px;
      }
      .image-container img {
        width: 100%;
        transition: .5s ease;
      }
      .image-container:hover img {
        opacity: .6;
        transition: .5s ease;
      }
      #img-name {
       position: absolute;
       display: none;
       transition: .5s ease;
      }
      #img-name:hover {
       opacity: 1;
       transition: .5s ease;
      }
      p {
       margin: 0px;
       font-size: 20px;
       text-align: justify;
       font-size: 1.5vw;
     }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrap">
       <div class="image-column" id="col-1">
        <div class="image-container">
         <div id="img-name">
          <p>Pier To Pier, Brighton Pier</p>
         </div>
         <img src="images/piertopier.jpg.JPG">
        </div>
        <div class="image-container">
         <div id="img-name">
          <p>Looking Back, Brighton Beach</p>
         </div>
         <img src="images/lookingback.jpg.JPG">
        </div>
        <div class="image-container">
         <div id="img-name">
          <p>Heart Shaped Flocks, Brighton Pier</p>
         </div>
         <img src="images/heartshapedflocks.jpg.JPG">
        </div>
       </div>
      </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

  p {
   margin: 0px;
   font-size: 20px;
   text-align: center !important;
   font-size: 1.5vw;
   color: white !important;
 }

Answer 2

要使文本位于中心，您需要将文本容器拉伸并与图像具有相同的宽度，您可以通过创建父position的{​​{1}}来实现此目的以及带有relative和absolute的文字容器left:0，并将文字居中使用right:0并将其设为白色，欢迎使用{{1} }，

将其垂直居中，在容器上使用text-align:center，在文本上使用color:#fff

（我添加背景红色只是为了显示文字，当你放置图像时将其删除）

＆＃13;

＆＃13;

display:flex

＆＃13;

self-align:center

＆＃13;

＆＃13;

＆＃13;

Answer 3

设置相对于图像容器类的位置。添加顶部：50％，左：0，右：0表示＃img-name。最后一个从p中删除text-align：justify。 您可以轻松添加白色，但如果将颜色添加到白色则不会显示

      $('.image-container').on('mouseenter', function(){
       $(this).children('div').show();
      });

      $('.image-container').on(
        'mouseleave',
        function(){
          $(this).children('div').hide();
        }
      );

  div#image-wrap {
    background-color: white;
    padding: 0;
    margin: auto;
    text-align: center;
  }

  div.image-column {
    width: 31.5%;
    background-color: white;
    display: inline-block;
    margin: 0px;
  }
  .image-container{
   position:relative;
  }
  .image-container img {
    width: 100%;
    transition: .5s ease;
  }

  .image-container:hover img {
    opacity: .6;
    transition: .5s ease;
  }

  #img-name {
    position: absolute;
    display: none;
    transition: .5s ease;
    top:50%;
    left:0;
    right:0
  }
  #img-name:hover {
    opacity: 1;
    transition: .5s ease;
  }

  p {
    margin: 0px;
    font-size: 20px;
   
    font-size: 1.5vw;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrap">
       <div class="image-column" id="col-1">
        <div class="image-container">
         <div id="img-name">
          <p>Pier To Pier, Brighton Pier</p>
         </div>
         <img src="https://i.stack.imgur.com/m2GGn.jpg">
        </div>
        <div class="image-container">
         <div id="img-name">
          <p>Looking Back, Brighton Beach</p>
         </div>
         <img src="images/lookingback.jpg.JPG">
        </div>
        <div class="image-container">
         <div id="img-name">
          <p>Heart Shaped Flocks, Brighton Pier</p>
         </div>
         <img src="https://i.stack.imgur.com/m2GGn.jpg">
        </div>
       </div>
      </div>