Flexbox布局中如何设置中间子项更大且内部图片居中

• 中间容器尺寸为左右两侧的2倍，按1:2:1比例分配宽度
• 所有容器内的文字、图片都水平居中显示

<!doctype html>
<html>
<head>
<title>Portfolio</title>
<style> 
.holdingcontainer0{
  width: 100%; 
  display: flex; 
}
/* 抽离公共样式复用，减少冗余代码 */
.internalcontainerL0, .internalcontainerM0, .internalcontainerR0{
  padding: 30px; 
  border-radius: 20px; 
  font-size: 20px; 
  font-family: arial; 
  margin: 10px;
  text-align: center; /* 新增：让内部内容水平居中 */
}
.internalcontainerL0{
  flex:1; 
  background: #C1C1C1; 
  color: #00486B;
}
.internalcontainerM0{
  flex:2; /* 替换原来的flex-grow:2，保证比例计算正确 */
  background: #00486B; 
  color: #00386B;
}
.internalcontainerR0{
  flex:1; 
  background: #C1C1C1; 
  color: #00486B
}
.title {
  font-size: 50px; 
  text-align: center; 
  background-color: #C1C1C1; 
  border-radius: 20px; 
  font-family:arial; 
  color: #00486B;
}
</style>
</head>
<body>
<!-- 原标题位置修复，移到body内部符合HTML规范 -->
<h1 class="title">PORTFOLIO </h1>
<div class="holdingcontainer0">
  <div class="internalcontainerL0"> 
    <a href="#"><h1>OLD WORK</h1></a>
    <img src="circ.png" alt="jojo" width="100" height="100">
  </div>
  <div class="internalcontainerM0"> 
    <a href="#"><h1>GAMES</h1></a>
    <img src="joseph.jpg" alt="jojo" width="200" height="150">
  </div>
  <div class="internalcontainerR0"> 
    <a href="#"><h1>ABOUT ME</h1></a>
    <img src="circ.png" alt="jojo" width="100" height="100">
  </div>
</div>
</body>
</html>

核心修改说明 #

• 三个内部容器新增text-align: center属性，实现内部内容水平居中
• 将中间容器的flex-grow:2改为flex:2，和左右容器的flex:1匹配，保证容器宽度严格按照1:2:1的比例分配
• 修复了原代码中标题标签放在head和body之间的结构错误
• 抽离了三个内部容器的公共样式，减少代码冗余

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