在 JS 库中居中替代文本

Question

我有一个图片库，可以打开图片网格下方的每张图片，作为带有描述性文字的放大图。我似乎无法让文字居中并留在图像上。我试过用溢出、宽度等改变 CSS，但我认为它在 JS 代码中。我不懂 JS，我在 codepen 上找到了代码并根据需要进行了更改（并提供了一些堆栈溢出帮助！）。此外，我希望放大的图像在一段时间后关闭并恢复到画廊。这可能吗？

我的代码笔 link 是 https://codepen.io/Ovimel/pen/YgzVeg 第一张图片显示了我遇到的问题。

我是编码新手，我不确定我 post 是否正确编辑了这里的代码。实际上，我知道这是不正确的，因为图像未对齐，标准尺寸和放大图未加载，但我需要 post 所有内容吗？ Codepen 是您实际看到它 work/not 工作的地方。预先感谢您的帮助！

/*styling for gallery page images*/

* {
  box-sizing: border-box;
}


/*The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 200px;
  overflow: hidden;
}


/*Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
  max-width: 100%;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container-gallerypage {
  position: relative;
  display: none;
  padding: 15px;
  text-align: center;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 35px;
  color: red;
  font-size: 20px;
  text-align: center;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}


/*styling for footer and footer text links*/

footer {
  background-color: #6e6b5c;
  color: white;
  font-family: "Days One", sans-serif;
  font-size: .8em;
  text-align: center;
  padding: 10px;
  border: solid 3px #194a76;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/*@media only screen and (max-width: 320px) {
  .footer {
    background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
  }
}*/

a.footerlinks {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

a.footerlinks:link,
a.footerlinks:visited {
  color: white;
}

a.footerlinks:hover,
a.footerlinks:active {
  color: #194a76;
  text-decoration: underline;
}

<article role="main">
  <header>
    <h1>THE GALLERY</h1>
    <p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
  </header>


  <!-- slide gallery -->
  <!-- The four columns -->

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). 
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>


  <div class="container-gallerypage">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:80%">
    <div id="imgtext" style="text-align: center;width:100%;"></div>
  </div>

</article>

<br>

<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
  <p>This site is hosted at no cost to the public by
    <a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
    <a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
    <a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
  <p>Copyright &copy;2012-2019. All rights reserved. Design and website by Vivian Linderman.
    <address>
            <a class="footerlinks" href="mailto:vivian_lbdn@hotmail.com">CONTACT WEBMASTER</a>
          </address>Created 2012, updated 2019.
  </p>
</footer>
</div>

Answer 1

我个人会重新开始整个事情，但将此添加到您的 CSS 应该会有所帮助

#imgtext {
    width: 70%;
    display: block;
    margin: auto;
    position: relative;
    bottom: 100px;
}

我刚刚在代码笔中进行了测试，它需要 !important 标签

#imgtext {
    width: 70%!important;
    display: block!important;
    margin: auto!important;
    position: relative!important;
    bottom: 100px!important;
}

Answer 2

您的 css 的一个小调整可以得到想要的结果。设置 max-width（比全宽窄）和适当设置的边距（在本例中，我给它的最大宽度为 75%，左右边距为 10% [近似值，考虑到帐户浏览器添加 margins/padding]，并将其设置为 display:block 和 position:absolute，距离顶部 20%。这些值中的任何一个都可以根据需要进行调整，但你得到了图片。我会建议使用较小的字体大小以利于较小的屏幕，作者

希望这对您有所帮助

//Make older browsers aware of new HTML5 layout tags 
'header nav aside article footer section'.replace(/\w+/g, function(n) {
  document.createElement(n)
})

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

/*styling for gallery page images*/

* {
  box-sizing: border-box;
}


/*The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 200px;
  overflow: hidden;
}


/*Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
  max-width: 100%;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container-gallerypage {
  position: relative;
  display: none;
  padding: 15px;
  text-align: center;
}


/* Expanding image text */

#imgtext {
  display: block;
  max-width:75%;
  position: absolute;
  top:20%;
  text-align:center;
  margin:0 10%;
  color: red;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}


/*styling for footer and footer text links*/

footer {
  background-color: #6e6b5c;
  color: white;
  font-family: "Days One", sans-serif;
  font-size: .8em;
  text-align: center;
  padding: 10px;
  border: solid 3px #194a76;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/*@media only screen and (max-width: 320px) {
  .footer {
    background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
  }
}*/

a.footerlinks {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

a.footerlinks:link,
a.footerlinks:visited {
  color: white;
}

a.footerlinks:hover,
a.footerlinks:active {
  color: #194a76;
  text-decoration: underline;
}

<body>
<article role="main">
  <header>
    <h1>THE GALLERY</h1>
    <p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
  </header>


  <!-- slide gallery -->
  <!-- The four columns -->

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). 
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>


  <div class="container-gallerypage">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:80%">
    <div id="imgtext" style="text-align: center;width:100%;"></div>
  </div>

</article>

<br>

<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
  <p>This site is hosted at no cost to the public by
    <a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
    <a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
    <a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
  <p>Copyright &copy;2012-2019. All rights reserved. Design and website by Vivian Linderman.
    <address>
            <a class="footerlinks" href="mailto:vivian_lbdn@hotmail.com">CONTACT WEBMASTER</a>
          </address>Created 2012, updated 2019.
</footer>
</body>

在 JS 库中居中替代文本

Centering alt text in JS gallery

html

javascript

css

image-gallery

alt