1

我想在一个跨度中居中图片。span 有类centerMe，但不影响图片。

标记centerMe：

.region.region-footer .centerMe{
    text-align: center;
  }

您可以在JSFiddle上找到此示例。

谢谢你的帮助

4

3 回答 3

1

它没有发生，因为它span是一个内联元素。

text-align:center不影响它，因为图像的总宽度和跨度的宽度完全相同。如果你给它 100% 的宽度，那么只有你会看到差异。

此外，width属性不适用于inline元素，因此将其更改为blockor inline-block。

添加width到标记：

.centerMe {
    width:100%;
    display:inline-block;
}

在这里更新了小提琴。

另一种解决方案是使用任何block类似的元素div，p或者section而不是使用span.

于 2014-07-18T06:50:27.777 回答
0

您不能text-align:在内联元素上使用这种方式。

如果您想实现这一点，您将不得不将您的跨度更改为一个<p>元素，即一个块。

于 2014-07-18T06:50:16.727 回答
0

跨度本身没有全宽，因此没有空间将图像居中。您可以通过将 更改span为div.

display: block或者，您可以通过添加到 CSS使其表现得像 div ：

.centerMe{
    display: block;
    text-align: center;
  }

或者，您可以width: 100%像 Hiral 建议的那样给出它，但是您还必须考虑任何边框、填充和边距。通过让它表现得像块元素，它会自动占据可用空间，我认为这是一个更灵活的解决方案。

于 2014-07-18T06:50:22.440 回答