Javascript 在JS库中居中alt文本

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

我的代码笔的链接是第一张显示我的问题的图片

我是一个编码新手，我不确定我在这里发布的代码是否正确。事实上，我知道这是不正确的，因为图像没有对齐，标准尺寸和放大没有加载，但我需要发布所有内容吗？代码笔是您将看到它实际工作/不工作的地方。提前感谢您的帮助

/*图库页面图像的样式设置*/
* {
框大小：边框框；
}
/*网格：四个相等的列，彼此相邻浮动*/
.栏目{
浮动：左；
宽度：25%；
填充：10px；
高度：200px；
溢出：隐藏；
}
/*在网格内设置图像样式*/
.img列{
不透明度：0.8；
光标：指针；
最大宽度：100%；
}
.列img：悬停{
不透明度：1；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*扩展图像容器*/
.货柜厨房第页{
位置：相对位置；
显示：无；
填充：15px；
文本对齐：居中；
}
/*展开图像文本*/
#imgtext{
位置：绝对位置；
底部：35px；
颜色：红色；
字体大小：20px；
文本对齐：居中；
}
/*展开图像内的可关闭按钮*/
.关闭{
位置：绝对位置；
顶部：10px；
右：15px；
颜色：白色；
字体大小：35px；
光标：指针；
}
/*页脚和页脚文本链接的样式*/
页脚{
背景色：#6e6b5c；
颜色：白色；
字体系列：“第一天”，无衬线；
字体大小：.8em；
文本对齐：居中；
填充：10px；
边框：实心3px#194a76；
边框左上半径：5px；
边框右上角半径：5px；
}
/*@仅介质屏幕和（最大宽度：320px）{
.页脚{
背景图片：url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a、 页脚链接{
颜色：白色；
字号：600；
文字装饰：无；
}
a、 页脚链接：链接，
a、 页脚链接：已访问{
颜色：白色；
}
a、 页脚链接：悬停，
a、 页脚链接：活动{
颜色：#194a76；
文字装饰：下划线；
}

，一家非营利性公司。如果您觉得在访问本网站有利于您，请考虑支持我们的重要工作通过
. 参观
网站，以发现其他社区

版权及副本；2012-2019. 版权所有。Vivian Linderman的设计和网站。
2012年创建，2019年更新。

我个人会重新开始整个过程，但将此添加到CSS中应该会有所帮助

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

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

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

---

我个人会重新开始整个过程，但将其添加到CSS中应该会有所帮助

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

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

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

---

对css稍加调整即可获得所需的结果。设置一个

max width

（比全宽窄）和一个可以适当设置它的边距（在本例中，我给了它75%的最大宽度和10%的左右边距[近似值，考虑到浏览器添加的边距/填充]，并将其设置为

display:block

，带

位置：absolute

，距顶部20%。这些值中的任何一个都可以根据您的意愿进行调整，但您得到了结果。我建议使用较小的字体，以便于屏幕更小，具体如下：

希望这有帮助

//让旧浏览器知道新的HTML5布局标记
“页眉导航旁边的文章页脚部分”。替换（/\w+/g，函数（n）{
document.createElement（n）
})
功能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”；
}

/*图库页面图像的样式设置*/
* {
框大小：边框框；
}
/*网格：四个相等的列，彼此相邻浮动*/
.栏目{
浮动：左；
宽度：25%；
填充：10px；
高度：200px；
溢出：隐藏；
}
/*在网格内设置图像样式*/
.img列{
不透明度：0.8；
光标：指针；
最大宽度：100%；
}
.列img：悬停{
不透明度：1；
}
/*清除列后的浮动*/
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*扩展图像容器*/
.货柜厨房第页{
位置：相对位置；
显示：无；
填充：15px；
文本对齐：居中；
}
/*展开图像文本*/
#imgtext{
显示：块；
最大宽度：75%；
位置：绝对位置；
最高：20%；
文本对齐：居中；
利润率：0.10%；
颜色：红色；
字体大小：20px；
}
/*展开图像内的可关闭按钮*/
.关闭{
位置：绝对位置；
顶部：10px；
右：15px；
颜色：白色；
字体大小：35px；
光标：指针；
}
/*页脚和页脚文本链接的样式*/
页脚{
背景色：#6e6b5c；
颜色：白色；
字体系列：“第一天”，无衬线；
字体大小：.8em；
文本对齐：居中；
填充：10px；
边框：实心3px#194a76；
边框左上半径：5px；
边框右上角半径：5px；
}
/*@仅介质屏幕和（最大宽度：320px）{
.页脚{
背景图片：url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
}
}*/
a、 页脚链接{
颜色：白色；
字号：600；
文字装饰：无；
}
a、 页脚链接：链接，
a、 页脚链接：已访问{
颜色：白色；
}
a、 页脚链接：悬停，
a、 页脚链接：活动{
颜色：#194a76；
文字装饰：下划线；
}

，一家非营利性公司。如果你觉得