Flex容器内text-align属性失效问题求助

这个问题是Flex布局的典型特性导致的，很常见！咱们来一步步理清楚：

问题根源 #

你的.display元素应该是Flex容器（推测是.row，你大概率给它加了display: flex）的直接子元素，这时候它会变成Flex Item。Flex Item的默认宽度是由自身内容决定的（也就是width: auto）——哪怕你设置了text-align: center，因为元素本身的宽度和里面的文本宽度完全一致，所以根本看不出居中效果。而当它不在Flex容器里时，作为块级元素会默认占满父容器宽度，text-align自然就能正常生效了。

解决方案 #

有几种简单的处理方式，选最贴合你布局需求的就行：

方法1：让.display占满剩余空间

给.display添加flex-grow: 1，它会自动填充.row容器里的剩余空间，此时text-align: center就能让文本在这个空间里居中，还能保留按钮在左侧的布局：

.row {
  display: flex;
  width: 100%; /* 确保row占满父容器宽度 */
}
.display {
  flex-grow: 1;
  text-align: center;
}

方法2：强制设置.display的宽度

如果不想用Flex属性，直接给.display设置width: 100%，让它占满父容器宽度：

.display {
  width: 100%;
  text-align: center;
}

方法3：在Flex容器上统一控制对齐

如果希望.row里的所有元素都居中（包括按钮），可以直接给.row设置justify-content: center，不过这个方法可能不符合计算器的常规布局，按需选择：

.row {
  display: flex;
  justify-content: center;
  width: 100%;
}

效果验证 #

用方法1的话，按钮会留在左侧，.display内的文本会在剩余空间里完美居中，刚好匹配计算器的布局需求～

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