html - 标题在居中对齐段落的左侧对齐

Question

标题听起来很困惑，但我画了一张图来解释:

我想将我的 p 标签对齐到中心，就在 p 标签上方，我希望 h2 标签在 p 上方但对齐到它的左侧，我尝试使用填充但它不能正确缩放不同的分辨率和纵横比的

到目前为止我尝试过的是

p {
   text-align: center;
}

h2 {
    padding-left: 48%; /* it's what worked with 1440p but not on 1080p */
}

p 和 h2 包含在一个 div 中

<div>
   <h2>Title</h2>
   <p>Text Content</p>
<div>

Answer 1

居中一个外层的div，并将内层的div设置为display: inline-block:

.center {
  text-align: center;
}

.container{
   display: inline-block; 
}

h2 {
  text-align: left;
}

<div class="center">
  <div class="container">
    <h2>Title</h2>
    <p>Text Content</p>
  </div>
</div>