Question

我正在尝试使用CSS将单个角色居中，而span比角色更窄。

我有：

<span id="A">X</span><span id="B">Y</span><span id="C">Z</span>

所有三个跨度都有

display: inline-block;
width: 32px;
height: 32px;

并且中间跨度中的Y字符大于跨度本身。我希望角色在跨度上居中，与X和Z重叠。

当Y小于跨度时，以下规则适用于居中：

vertical-align: middle;
text-align: center;

当Y比包含框宽时，这不再有效：Y现在向右移动。当Y比包含盒宽时，如何将Y水平居中？

（我已尝试使用其他答案中建议的display: table-cell，但此操作失败，因为width: 32px被忽略了。）

以下是我尝试的内容：https://jsfiddle.net/seehuhn/hec3xucu/

＆＃13;

span {
  display: inline-block;
  width: 32px;
  height: 32px;
  font: bold 32px/32px courier;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

#A {
  background: red;
}

#B {
  background: #8f8;
  font-size: 92px;
  color: #F99;
  z-index: 1;
}

#C {
  background: blue;
}

＆＃13;

<p><span id="A">X</span><span id="B">Y</span><span id="C">Z</span>

＆＃13;

Answer 1

你可以使用flex-box

来做到这一点

  span {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    width: 32px;
    height: 32px;
    font: bold 32px/32px courier;
    position: relative;
    float: left;
  }

  #A {
    background: red;
  }

  #B {
    background: #8f8;
    font-size: 92px;
    color: #F99;
    z-index: 1;
  }

  #C {
    background: blue;
  }

如果您想了解有关弹性框的更多信息，请单击here。

Answer 2

你绝对可以将Y置于其他2上。

＆＃13;

p {
  position: relative;
  display: inline-block;
  background: #8f8;
}

span:not(#B) {
  display: inline-block;
  width: 32px;
  height: 32px;
  font: bold 32px/32px courier;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

#A {
  background: red;
  margin-right: 32px;
}

#B {
  font-size: 92px;
  color: #F99;
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#C {
  background: blue;
}

＆＃13;

<p><span id="A">X</span><span id="B">Y</span><span id="C">Z</span>

＆＃13;

Answer 3

使用CSS flexbox中心任何非常简单。

p {
  display: flex;               /* 1 */
}

span {
  width: 32px;
  height: 32px;
  text-align: center;
  font: bold 32px/32px courier;
}

#B {
  z-index: 1;
  font-size: 92px;
  color: #F99;
  background: #8f8;
  display: flex;               /* 2 */
  justify-content: center;     /* 3 */
}

#A {
  background: red;
}

#C {
  background: blue;
}

<p>
  <span id="A">X</span>
  <span id="B">Y</span>
  <span id="C">Z</span>
</p>

注意：

使主容器成为灵活容器。现在，您可以在子元素上使用flex alignment属性。另外，默认情况下，flex容器会排列行中的所有子元素。
将#B元素设置为（嵌套的）flex容器，这样就可以将flex属性应用于内容（从技术上讲，它是HTML结构中的三个级别）。
使用flex属性水平居中内容。（如果您需要垂直居中，请添加align-items: center。）

如何将较大的角色置于较小的容器上？

3 个答案: