html - 如何在 div 框中心对齐溢出文本？

Question

这是我的问题:

我的标题词溢出了 div 框。原因是word size比div的width宽，我设置了“nowrap”规则。显示如下:

我希望“FORMAT CAMERA”字样对齐 div 框的中心轴，因此它使 F 的一部分向左溢出，A 的一部分向右溢出。我怎样才能做到这一点？这是我的简单 CSS 代码:

.content {
  text-align: center;
}

h1(FORMAT CAMERA) {
  color: white;
  font-size: 50px;
  font-family: "Rubik", sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}

Answer 1

只需将 display:flex 和 justify-content: center 添加到 .content 即可。
查看更多关于 amazing flex box

.content {
  text-align: center;
  border: solid 1px #333;
  width: 300px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

h1 {
  color: black;
  font-size: 50px;
  font-family: "Rubik", sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}

<div class="content">
  <h1>FORMAT CAMERA</h1>
</div>