如何居中标题与标题同X轴的消息，同时左对齐子消息？

需求 #

• 标题居中显示
• 消息与标题的X轴起始点对齐
• 子消息左对齐显示

遇到的问题 #

尝试了以下代码后出现两个问题：两个消息紧挨在一起，且第二个消息未与标题对齐。

原代码 #

CSS

.container{
    display: flex;
    justify-content: center;
}

.divForSubMessageAndMessage{
    display: flex;
    justify-content: flex-start;
}

.message{
    justify-self: center;
    align-self: center;
}

HTML

<div className="container">
    <h1>Title</h1>
    <div className="divForSubMessageAndMessage">
        <p className="subMessage">subMessage</p>
        <p className="message">Message</p>
    </div>
</div>

解决方案 #

原代码问题在于：.container用flex会让标题和消息容器横向排列，.divForSubMessageAndMessage的flex布局会让两个<p>标签横向紧挨。以下是修正后的代码：

修正后CSS #

.container {
  text-align: center; /* 实现标题居中 */
}

.message-group {
  max-width: fit-content; /* 容器宽度适配内容 */
  margin: 0 auto; /* 让容器居中，与标题X轴起始点对齐 */
  text-align: left; /* 内部文本左对齐 */
}

.sub-message, .message {
  margin: 0; /* 清除p标签默认外边距 */
}

.sub-message {
  margin-bottom: 8px; /* 可选：增加子消息与主消息的间距 */
}

修正后HTML #

<div class="container">
  <h1>Title</h1>
  <div class="message-group">
    <p class="sub-message">subMessage</p>
    <p class="message">Message</p>
  </div>
</div>

说明 #

1. .container设为块级元素，通过text-align: center让标题居中，标题和消息组自动换行排列。
2. .message-group用margin: 0 auto实现居中，配合max-width: fit-content让容器宽度贴合内容，确保内部左对齐的文本起始点与居中的标题对齐。
3. 清除<p>标签默认外边距，避免多余间距，可选添加子消息与主消息的间距优化布局。

内容的提问来源于stack exchange，提问作者coderoftheday