html - 彩色框内的文本

Question

我正在创建一个简单的 HTML-CSS 组合网站。我正在努力寻找一种方法来按照图片中显示的方式设置以下文本的样式。

请务必注意，我取得了一些成果，但问题是此处的文本不是从左到右居中。它更像是一种随机排列，我不知道如何实现。另外请记住，此文本将以放置在图片前面的方式使用。所以它必须被创建为某种组件，我以后可以轻松地重用/对齐图片。

关于如何实现这样的结果有什么想法吗？

如您所见，我已经成功地在黑框中添加了文本。但是第二行看起来不像上面的原型(prototype)。我不知道如何实现这一目标。有什么想法吗？

这是我的代码:

HTML

/* Styles the header text "Hello, World!" putting it in a black box. */
   
.box {
   width: 50rem;
   margin: 0.2rem auto;
   font-family: 'Inter', sans-serif;
   font-weight: normal;
 }

 h1 {
   color: white;
   font-size: 2.5rem;
   line-height: 3rem; /* reduce size to remove gap between text */
   margin: 0px;
 }

 h1 span {
   background-color: #2d2d2d;
   padding-bottom: 0.8rem;
   padding-left: 1.2rem;
   padding-right: 1.2rem;
   -webkit-box-shadow: 1rem 0px 0px #2d2d2d, -1rem 0px 0px #2d2d2d;
   box-shadow: 1rem 0px 0px #2d2d2d, -1rem 0px 0px #2d2d2d;
   -webkit-box-decoration-break: clone;
   -ms-box-decoration-break: clone;
   -o-box-decoration-break: clone;
   box-decoration-break: clone;
 }

<!-- Hello World Text that floats over the header picture -->
<div class="box">
  <h1>
   <span>Hello, <br> &emsp; World!</span>
  </h1>
</div>

提前致谢!

Answer 1

Text-indent 可以在这里帮助您，而不是手动添加空格:

h1 {
  color: white;
  font-size: 2.5rem;
  line-height: 3rem;    
  text-indent: -30px;
  margin:0;
  margin-left: 46px;
}

h1 span {
  background-color: #2d2d2d;
  padding: 0 1.2rem 0.8rem;
  -webkit-box-decoration-break: clone;
  -ms-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

<h1>
    <span>Hello, <br> World!</span>
  </h1>