html - 尝试在居中元素中左对齐文本

Question

我正在努力实现您在下图中面板底部看到的效果。 3 个元素中的每一个都居中，但文本左对齐。

我已经开发了以下基本的 CSS 和 HTML 代码。我正在尝试尽可能多地使用 flexbox 进行响应式布局。有人有任何纯 HTML/CSS 解决方案吗？

我知道 p 标签是 block 级元素。那么，如果不设置 p 标签的宽度，我有什么选择呢？或者我可以使用另一个标签？

我在下面提供的 HTML 和 CSS 代码只有基本结构。

.panel {
  display: flex;
  border: 1px solid black;
  min-height: 300px;
  flex-direction: column;
  max-width: 500px;
}

.panel-body {
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  justify-content: center;
}

.panel-heading {
  padding: 10px 10px;
}

.panel-body div.chart {
  flex: 0 0 100%;
  min-height: 150px;
  background-color: green;
}

.panel-body div {
  text-align: center;
  flex: auto;
  background-color: red;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

p {
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}

<div class="panel">
  <div class="panel-heading">
    HEADING
  </div>
  <div class="panel-body">
    <div class="chart"></div>
    <div>
      <p>HIGH
        <br/>144</p>
    </div>
    <div>MEDIUM
      <br/>2</div>
    <div>LOW
      <br/>3</div>
  </div>
</div>

Answer 1

只是更改了.panel-body div 的样式。此外，此处不需要 p 标记，请考虑将其从标记中删除。演示:

.panel {
  display: flex;
  border: 1px solid black;
  min-height: 300px;
  flex-direction: column;
  max-width: 500px;
}

.panel-body {
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  justify-content: center;
}

.panel-heading {
  padding: 10px 10px;
}

.panel-body div.chart {
  flex: 0 0 100%;
  min-height: 150px;
  background-color: green;
}

.panel-body div {
  /* Take 33.33% width, allow grow and shrink */
  flex: 1 1 33.33%;
  background-color: red;
  /* become a flex-container */
  display: flex;
  /* align flex-items vertically */
  flex-direction: column;
  /* center vertically */
  justify-content: center;
  /* center horizontally */
  align-items: center;
}

p {
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
}

<div class="panel">
  <div class="panel-heading">
    HEADING
  </div>
  <div class="panel-body">
    <div class="chart"></div>
    <div>
      <p>HIGH
        <br/>144</p>
    </div>
    <div>MEDIUM
      <br/>2</div>
    <div>LOW
      <br/>3</div>
  </div>
</div>