Question

我有一个图片库，可打开图像网格下方的每个图像，并以描述性文字放大显示。我似乎无法使文本居中并停留在图像上。我试图用溢出，宽度等来更改CSS，但是我认为它在JS代码中。我不了解JS，我在代码笔上找到了代码，并根据需要进行了更改（并提供了一些堆栈溢出帮助！）。另外，我希望放大的图像在一段时间后关闭并恢复为图库。有可能吗？

我的Codepen的链接为https://codepen.io/Ovimel/pen/YgzVeg。第一张图片显示了我遇到的问题。

我是编码新手，不确定我是否在此处正确张贴了代码。实际上，我知道这是不正确的，因为图像未对齐且标准尺寸和放大图像无法加载，但是我是否需要发布所有内容？您会在Codepen上看到它实际工作/不工作的地方。预先感谢您的帮助！

/*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％[近似值，考虑到帐户浏览器添加的边距/边距]，然后将其设置为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库中居中替换文本

2 个答案: