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

Question

这是我的问题:

我的标题词溢出了div框.原因是单词大小比div的宽度宽,我设置了"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.
了解更多关于惊人的弹性盒子

.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>