Question

我在带有边框的两个圆圈内有ap元素，需要根据圆的宽度使p元素居中但是我想让p元素分成两行而不需要创建两个p元素所以我使用了最大宽度。我认为这导致它不能居中，但我可能错了。如果有人知道一个好的黑客来解决这个问题，请启发我

<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

您的100px宽<p>是块级别的，因此它不会遵循内联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>

基于比文本max-width

1 个答案: