如何使用flex-direction: column实现表格布局并解决text-align:center不生效问题

text-align 属性仅对宽度大于内部内容宽度的块级元素生效，你当前代码中 #stockPrice、#stockVolume 是flex容器的直接子元素，默认宽度由内部内容撑开，和文本宽度完全一致，因此设置 text-align: center 不会有可见变化。

给左侧标签和右侧数值容器设置统一的固定宽度，保证上下行元素对齐，同时让数值容器有足够空间应用居中样式：

修改后的CSS代码 #

.p-1 {
  padding: 1rem;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.font-weight-bold {
  font-weight: bold;
}

.display-4 {
  font-size: 2rem;
}

/* 新增对齐样式 */
.label {
  width: 60px;
  display: flex;
  align-items: center;
}
.value {
  min-width: 80px;
  text-align: center;
}

修改后的HTML代码 #

<div class="d-flex">
    <div class="p-1 d-flex flex-column align-items-center">
        Ticker
        <div id="stockSymbol" class="font-weight-bold display-4">--</div>
    </div>
    <div class="d-flex flex-column p-1">
        <div class="d-flex">
            <span class="label">Price</span>
            <div id="stockPrice" class="value p-1 font-weight-bold display-4">--.--</div>
        </div>
        <div class="d-flex">
            <span class="label">Volume</span>
            <div id="stockVolume" class="value p-1">--</div>
        </div>
    </div>
</div>

你可以根据实际展示需要调整label和value的宽度值，响应式适配时只需修改对应宽度参数即可，灵活性远高于原生表格。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan