如何在并排的两张图片下方设置居中对齐的文本

我实现了如下效果：

但我的代码写成这样：

<img src="images/kinz/pitou.png" style="width:230px;margin-left:30px;border-style:solid; border-color:rgb(246, 111, 225);" alt="">
<img src="images/kinz/madeline.png" style="width:230px;margin-left:30px;border-style:solid; border-color:rgb(246, 111, 225);" alt="">    
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<b>Neferpitou</b>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<b>Madeline</b>    
<p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i>Hunter x Hunter</i>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<i>Celeste</i>

这段代码冗余又不规范，我想实现相同效果但优化代码。试过用table布局，但没法让文本整齐对齐到对应图片下方，对齐一张的话另一张table就会跑到下面而不是并排；也试过用border-spacing调整，效果不好，该怎么解决？

直接用现代CSS布局（Flexbox或Grid）就能完美解决，代码简洁易维护，还能保证布局稳定：

方案1：Flexbox布局（推荐，适合少量并排元素） #

把每个角色的图片+文本做成独立卡片，再用flex容器让卡片并排，文本自然对齐到图片下方：

<style>
  /* 外层容器：控制卡片并排 */
  .character-cards {
    display: flex;
    gap: 30px; /* 卡片之间的间距，替代原来的margin-left */
    padding-left: 30px; /* 整体左移，对应原代码的margin-left */
  }
  /* 单个卡片：统一宽度，文本居中 */
  .character-card {
    width: 230px;
    text-align: center;
  }
  /* 图片样式：复用统一样式 */
  .character-card img {
    width: 100%;
    border: solid rgb(246, 111, 225); /* 合并边框属性，更简洁 */
  }
  /* 名字样式 */
  .character-name {
    font-weight: bold;
    margin: 8px 0 4px;
  }
  /* 出处样式 */
  .character-source {
    font-style: italic;
    margin: 0;
  }
</style>

<div class="character-cards">
  <div class="character-card">
    <img src="images/kinz/pitou.png" alt="Neferpitou">
    <p class="character-name">Neferpitou</p>
    <p class="character-source">Hunter x Hunter</p>
  </div>
  <div class="character-card">
    <img src="images/kinz/madeline.png" alt="Madeline">
    <p class="character-name">Madeline</p>
    <p class="character-source">Celeste</p>
  </div>
</div>

方案2：Grid布局（适合后续扩展更多元素） #

如果以后要加更多角色，Grid布局能快速适配多列：

<style>
  /* 网格容器：定义两列，每列宽度230px */
  .character-grid {
    display: grid;
    grid-template-columns: repeat(2, 230px);
    gap: 30px;
    padding-left: 30px;
  }
  .character-card img {
    width: 100%;
    border: solid rgb(246, 111, 225);
  }
  .character-name {
    font-weight: bold;
    text-align: center;
    margin: 8px 0 4px;
  }
  .character-source {
    font-style: italic;
    text-align: center;
    margin: 0;
  }
</style>

<div class="character-grid">
  <div class="character-card">
    <img src="images/kinz/pitou.png" alt="Neferpitou">
    <p class="character-name">Neferpitou</p>
    <p class="character-source">Hunter x Hunter</p>
  </div>
  <div class="character-card">
    <img src="images/kinz/madeline.png" alt="Madeline">
    <p class="character-name">Madeline</p>
    <p class="character-source">Celeste</p>
  </div>
</div>

为什么不推荐table布局？ #

table是用来展示表格数据的，用它做布局语义不对，还会增加不必要的嵌套和复杂度。上面两种现代布局方式不仅代码更干净，后续调整样式或者扩展内容都更方便。

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