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

Question

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

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

我知道p标记是块级元素。那么在没有设置p标签宽度的情况下，我的选择是什么？或者也许我可以使用另一个标签？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个HTML代码：

<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><p>MEDIUM<br/>2</p></div>
    <div><p>LOW<br/>3</p></div>
  </div>
</div>

看来您最初只将包含“HIGH”和“144”的div放在<p>标记中，根据您的css代码，该标记是被设置为具有左对齐文本的属性。但是，其他2 <div> s内的内容未包含在<p>标记内，因此未对其进行样式设置。

Answer 2

刚改变了.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>