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

Question

我正在为我在大学学习的编码课程创建一个网站，其中一个要求是使用 JavaScript。我已添加它，以便当您将鼠标悬停在网站上的图像上时，文本将出现在图像上。但是，我想让文本变成白色并且希望它居中，我已经尝试了所有方法，但文本不会从每个图像的左上角移动。有小费吗？

      $('.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 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;
     }

<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>

Answer 1

要使文本居中，您需要将文本容器拉伸并具有与图像相同的宽度，您可以通过将父级relative 的position 和文本容器absolute 与left:0 和 right:0，并将文本居中使用 text-align:center 并将其设为白色，嗯 .. color:#fff，

要使其垂直居中，请在容器上使用display:flex，在文本上使用self-align:center

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

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;
          display: flex;
          margin-top: 10px;
          text-align:center;
      }
      .image-container img {
        width: 100%;
        transition: .5s ease;
      }
      .image-container:hover img {
        opacity: .6;
        transition: .5s ease;
      }
      #img-name {
       position: absolute;
       left: 0;  /* stretch the text container */
       right: 0; /* stretch the text container */
       
       transition: .5s ease;
       display: flex;
       align-self: center;
       text-align: center;
      }
      #img-name:hover {
       opacity: 1;
       transition: .5s ease;
      }
      p {
       margin: 0px;
       font-size: 20px;
       text-align: center; /* to make the text in the center */
       color: #fff; /* to make the text white */
       font-size: 1.5vw;
       width: 100%;
       text-shadow: 0 0 2px #000;
       z-index: 999;
     }

<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://loremflickr.com/100/100/dog">
        </div>
        <div class="image-container">
         <div id="img-name">
          <p>Looking Back, Brighton Beach</p>
         </div>
         <img src="https://loremflickr.com/100/100/cat">
        </div>
        <div class="image-container">
         <div id="img-name">
          <p>Heart Shaped Flocks, Brighton Pier</p>
         </div>
         <img src="https://loremflickr.com/100/100/flower">
        </div>
       </div>
      </div>

Answer 2

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

Answer 3

设置相对于图像容器类的位置。为#img-name 添加 top:50%, left:0, right:0。最后一个删除 text-align: justify from p。 您可以轻松添加白色，但如果您将颜色添加到白色，它将不可见。

      $('.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>