Flex布局下Info区块三等分后子标题居中问题求助

要实现标题居中并让三个区块均等划分，你需要调整CSS样式，具体修改如下：

修改后的CSS代码 #

.info{
  display: flex;
}
/* 给三个子区块设置均等宽度+内容居中 */
.left-info, .middle-info, .right-info {
  flex: 1;
  text-align: center;
}
/* 若仅需标题居中，可单独给标题类设置如下样式（无需上面的text-align） */
.address-title, .hours-title, .contact-title {
  text-align: center;
}

说明 #

• flex: 1 会让三个子区块自动均分.info容器的宽度，实现真正的均等布局，比justify-content: space-between更适配这种均分需求。
• text-align: center 能让区块内的所有文本（包括标题和下方内容）水平居中，完全匹配示例图的效果；如果只需要标题居中，单独给标题类设置该属性即可。

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