在JS库中居中替代文本

问题描述 投票：0回答：2

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

我的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:[email protected]">CONTACT WEBMASTER</a>
          </address>Created 2012, updated 2019.
  </p>
</footer>
</div>
javascript html css image-gallery alt
2个回答
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;
}
1
投票

你的css的一个小调整可以得到所需的结果。设置一个max-width（比整个宽度窄）和一个适当设置它的边距（在这种情况下，我给它的最大宽度为75％，左右边距为10％[近似，考虑到浏览器添加边距/填充]，并使用display:block将其设置为position:absolute，从顶部设置为20％。这些值中的任何一个都可以根据需要进行调整，但是您可以得到图片。我建议使用较小的字体大小以获得较小的屏幕， by by

希望这可以帮助

//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:[email protected]">CONTACT WEBMASTER</a>
          </address>Created 2012, updated 2019.
</footer>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.