html - 基于比文本最大宽度更大的宽度居中文本

Question

我在两个带边框的圆圈内有一个 p 元素，需要根据圆圈的宽度将 p 元素居中，但是我想让 p 元素分成两行而不需要创建两个 p 元素，所以我使用了最大宽度。我相信这是导致它不居中的原因，但我可能是错的。如果有人知道解决这个问题的好办法，请赐教

DEMO

<div class="one">
  <div class="two">

    <p class="survive">Surviving Earth</p>

  </div>
</div>


.one {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px inset #81ff14;
}

.two {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 20px outset #81ff14;
  margin: auto;
  margin-top: 5px;
  text-align: center;
}

.survive {
  font-size: 36px;
  max-width: 100px;
}

Answer 1

您的 100 像素宽 <p>是 block 级的，所以它不会遵循内联 text-align: center规则。你需要给它一个自动的左右边距来把它放在水平中心:

.survive {
  font-size: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100px;
}

执行此操作后，您会发现它有点太靠右了。那是因为你的第一个字超过了 100px 的限制(我测得大约 140px)，浏览器不会换行。

.one {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 20px inset #81ff14;
}

.two {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 20px outset #81ff14;
  margin: auto;
  margin-top: 5px;
  text-align: center;
}

.survive {
  font-size: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: 100px;
  text-align: center;
}

<div class="one">
  <div class="two">

    <p class="survive">Surviving Earth</p>

  </div>
</div>