Html 在固定div中水平居中文本

我试图将四个

h4

标记放在各自

fixed

div的中心（所有标记的

width:100%

以保持其

背景色：rgba（255、255、255、0.5）；

跨越整个浏览器宽度）

我尝试了很多CSS标签的组合，但都没能解决

工作草案：

HTML:

---

拆卸位置：固定；并添加文本对齐：居中；对齐文本

.thumb-col .fix {
  position: fixed; - /* delete this */
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  width: 100%;
  text-align: center; /* Add This */

---

我认为问题在于你在每个头球上都有固定的位置。尝试将所有标题移动到

.conatainer

上方的

.thumb page

新位置，并将

位置：relative

添加到此容器行。同样要保持与图像相同的网格结构，当然要对每个标题文本使用

text align:center

电子数据交换：

---

工作

除了我需要

div

h4

固定在页面顶部之外，这将起作用。您真的需要将这些标题定位为

固定

？如果没有，请尝试从

class=“fix”

更改为

class=“text center”

，因此，当页面向下滚动时，浏览者知道每列图像对应的是哪一类，这非常有效-现在标题列比图像列宽一点，因此文本在列上方不是完全居中-知道如何解决这个问题吗？草稿：是的，当我发现我在摆弄小提琴时，应该有更多的东西。因此，保持标题上下文为相对的，并将固定位置移动到其行。如果这是您需要的，请检查fiddle。我找到了一个解决方法：将新标题粘贴在它自己的容器中，并使用

位置：fixed

插入包含所有图像列的行中，位于这些列的上方。谢谢你的帮助，先生

/* Thumbnail section */

.thumb-col .fix {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    width: 100%;
}

.thumb-col h4 {
    letter-spacing: 2px;
}

.thumb-col .fix h4 {
    margin-top: 0px !important;
    margin-bottom: 15px !important;
}

.thumb-col div a img {
    margin: 0 auto !important;
    display: block;
    width: 200px;
}

.thumb-col .fix {
  position: fixed; - /* delete this */
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  width: 100%;
  text-align: center; /* Add This */