如何在一行下的三個網格列中平均擬合三個svg影像

自從我處理以下問題以來已經一個月了，但沒有成功。我有三個大小差異較小的 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>

uj5u.com熱心網友回復：

您的示例中的對齊非常棘手，因為每個影像及其對應的文本都位于同一個 div 中。如果外部磁區是網格容器，則網格項是子 div，而不是影像或文本。

通過使h3標簽直接成為外部div容器的子項，它們成為等效于div包裹每個影像的 s 的網格項，總共有六個網格項，可以排列在三列中：

<div class="grid-container">

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

  <div hljs-attr">image-container>
    <img .../>
  </div>

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

  <h3 hljs-attr">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>

uj5u.com熱心網友回復：

我按如下方式更新布局，但結果類似于影像：

 <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>

標籤：htmlcsssvg引导程序 4

上一篇：在SVG.js中用負坐標繪制一條線

下一篇：在選單上選擇不同選項時更改SVG填充