Question

问题如下面的链接所示 - 覆盖图像的文本只有在多行时正确居中......缩放窗口时问题仍然存在。

html：

<body>
    <div id="navbar">
        ...
    </div> 
    <div class="picFrame" id="pf1"></div>
    <div class="picFrame" id="pf2"></div>
    <div class="picFrame" id="pf3"></div>
</body>

我用js添加图片，依次附加到每个picFrame。 js：

$("#pf1").append('<div class="cont"><img src="pics/' + a[i][0] + '"><span>' + a[i][1] + ' - ' + a[i][2] + '</span></div>');

相关的css：

span {
    display: block;
    color: white;
    bottom: 25px;
    position: absolute;
    margin: 5px;
}
.cont {
    position: relative;
    text-align: center;
}
.picFrame {
    display: inline-block;
    width: 32%;
}
img {
    margin: 0 0 4% 0;
    border-radius: 4%;
    width: 100%;
}

所以问题是 - 为什么不单行文本中心，以及如何解决这个问题？

提前谢谢你，学家

Answer 1

如果没有一个工作示例，可能会添加以下内容：

span {width: 100%}

在我重建的代码中有效，但它可能与您的实际情况无关。

css：text-align：center只处理多行文本，而不是单行？

1 个答案: