如何将三幅svg图像均匀地拟合在一行以下的三个网格中

Question

我已经有一个月没有处理下面的问题了，但没有成功。我有三个svg图像，它们的大小差别较小，并试图将它们放入一行，将它们添加到不同的列中。

但不幸的是，最上面的文字和这些图像并不是完全吻合的。一些人得到高垫顶，一些底部。我知道SVG宽度的原因。我需要帮助。

​

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

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

<p>&nbsp;</p>

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

​

​

​

Answer 1

您的示例中的对齐非常棘手，因为每个图像及其对应的文本都驻留在同一个div中。如果外部分区是网格容器，则网格项是子div，而不是图像或文本。

通过使h3标记直接指向外部div容器的子容器，它们将成为等效于div包装每个图像的网格项，从而使总共有6个网格项可以排列在三列中：

<div class="grid-container">

  <div class="image-container>
    <img .../>
  </div>

  <div class="image-container>
    <img .../>
  </div>

  <div class="image-container>
    <img .../>
  </div>  

  <h3 class="image-label">
  <h3 class="image-label">
  <h3 class="image-label">

</div>

注意，三个h1元素跟随三个图像divs --六个网格项(网格容器的所有直接子元素)将流经为网格容器指定的网格模板创建的“单元格”：

css：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

因为指定了三个(相等)列，所以前三个项( div图像容器)占据了上一行的三个“单元格”。接下来的三项( h3标签)被推入第二行。

每个网格项都可以成为一个flex容器，允许对图像相对于其div容器的位置进行进一步细化。容器本身(包括标签)将始终对齐行和列。

下面的工作片段将上述原则应用于您的示例：

​

img {
  background: yellow;
}

.container {
  background: red;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 3px 50px;
  padding: 5%;
}

.container>div,.container>h3{
  border: 3px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0;
  padding: 5px;
}

<div id="section-top-homepage">
<h2> grid items shown with green borders</h2>
<div class="row circular-wrap text-center container">
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="67" src="/sites/default/files/inline-images/vision.svg" width="71" />
</div>
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="72" src="/sites/default/files/inline-images/objectives.svg" width="73" />

</div>
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="59" src="/sites/default/files/inline-images/mission.svg" width="72" />
</div>

<h3 class="whitecolor top15">Vision</h3>
<h3 class="whitecolor top15">Objectives</h3>
<h3 class="whitecolor top15">Mission</h3>
</div>
<p>The red area is a grid <i>container</i> specifying three equally spaced columns. The grid <i>items</i> are the direct children of the container (shown with green borders). 
<p>Each grid item is a <i>flex</i> container, allowing its content to be aligned and justified. The above example has the content aligned and justified to center. The content could be aligned by its baseline by changing the css <i>align-items</i> property to <i>flex-end</i></p>
<p>in addition to the grid-template, the css for the grid-container specifies the gap between items across rows and beteen rows. The left, right, top, and bottom space surrounding the grid items is specified by the padding applied to the grid container. 
</div>

​

Answer 2

我按如下方式更新布局，但结果与图像类似：

 <div class="container" id="top-home-sec">
<div class="row">
<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="67" src="/sites/default/files/inline-images/vision.svg" width="71" /></div>

<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="72" src="/sites/default/files/inline-images/objectives.svg" width="73" /></div>

<div class="col-md-4 col-sm-4 top15"><img alt="" data-entity-type="file" height="59" src="/sites/default/files/inline-images/mission.svg" width="72" /></div>

<h3 class="whitecolor top15">Vision</h3>

<h3 class="whitecolor top15">Objectives</h3>

<h3 class="whitecolor top15">Mission</h3>
</div>
</div>

​

​