如何使三个SVG图片在一行三列网格中均匀适配并对齐内容

第一步：清理破坏布局的无效元素 #

先移除代码中第二列和第三列之间的<p>&nbsp;</p>，这个元素会打乱Bootstrap的row-col布局结构，直接导致列错位和对齐异常。

第二步：统一SVG容器与对齐样式 #

通过给SVG添加统一容器+CSS强制对齐，消除SVG自身的空白区域，同时让所有元素在相同尺寸的容器内对齐：

修改后的HTML代码

<div id="section-top-homepage">
  <div class="row circular-wrap text-center">
    <div class="col-md-4 col-sm-4 top15">
      <div class="svg-container">
        <img alt="Vision" data-entity-type="file" src="/sites/default/files/inline-images/vision.svg" />
      </div>
      <h3 class="whitecolor top15">Vision</h3>
    </div>

    <div class="col-md-4 col-sm-4 top15">
      <div class="svg-container">
        <img alt="Objectives" data-entity-type="file" src="/sites/default/files/inline-images/objectives.svg" />
      </div>
      <h3 class="whitecolor top15">Objectives</h3>
    </div>

    <div class="col-md-4 col-sm-4 top15">
      <div class="svg-container">
        <img alt="Mission" data-entity-type="file" src="/sites/default/files/inline-images/mission.svg" />
      </div>
      <h3 class="whitecolor top15">Mission</h3>
    </div>
  </div>
</div>

配套CSS代码

/* 统一SVG容器尺寸，强制居中 */
.svg-container {
  width: 75px; /* 略大于最大SVG宽度，预留统一空间 */
  height: 75px; /* 略大于最大SVG高度，预留统一空间 */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 保证SVG比例不变，填充容器无拉伸 */
.svg-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 确保自定义间距类样式统一 */
.top15 {
  margin-top: 15px !important;
}

第三步：可选优化（修复SVG自身空白） #

如果上述方案仍有残留空白，说明SVG文件的viewBox包含多余边界。可以用SVG编辑器（如Inkscape）调整viewBox到图形实际范围，或者直接在HTML中给SVG补充viewBox属性（需对应图形实际坐标），例如：

<img alt="Mission" data-entity-type="file" src="/sites/default/files/inline-images/mission.svg" viewBox="0 0 72 59" />

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