Html 如何在span中居中图片？

我想在一个跨度中居中。span具有类

centerMe

，但不影响图片

centerMe的标记

：

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

您可以在上找到此示例

---

感谢您的帮助

您不能在内联元素上以这种方式使用

文本对齐：

---

如果要实现这一点，必须将跨度更改为一个

元素，即一个块。
跨度本身没有全宽，因此没有空间将图像居中。
您可以通过将
span
更改为
div
来解决此问题

或者，您可以通过将
display:block
添加到CSS中，使其行为类似于div：

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

或者，你可以给它
宽度：100%
，就像Hiral建议的那样，但是你还必须考虑任何边框、填充和边距。通过使其行为类似于块元素，它将自动占用可用空间，我认为这是一个更灵活的解决方案。
这不会发生，因为
span
是一个内联元素

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

另外，
width
属性在
inline
元素上不起作用，因此将其更改为
block
或
inline block

将
宽度
添加到标记中：

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

在这里更新

另一种解决方案是使用任何
块
元素，如
div
、
p
或
节
，而不是使用
span
该小提琴中的.region在哪里？@user3168736.region.region-footer来自我的drupal模板