如何在 CSS 中将多个图标与文本垂直对齐？答案

【问题标题】：How to align multiple icons with text vertically in CSS?如何在 CSS 中将多个图标与文本垂直对齐？
【发布时间】：2019-09-05 15:23:57
【问题描述】：

我有一个带有一些图标和文本（地图图例）的以下 div 下面：

上面的 HTML 代码：

<div class="agsjsTOCNode" id="TOCNode_layer5_0_legend0">
    <div style="padding-left: 36px;">
        <span class="agsjsTOCContent">      
        <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 20px; width:20px;">
     <span></span>
        <span class="agsjsTOCLegendLabel">Legend 01</span>
        </span>
    </div>
</div>

上面的 CSS

.agsjsTOCNode {
    padding-top: 1px;
    padding-bottom: 1px;
    direction: rtl;
    }
    .agsjsTOCContent {
    white-space: nowrap;
}
.agsjsTOCIcon {
    vertical-align: bottom;
}
.agsjsTOCLegendLabel {
    font-size: 8pt;
    padding-left: 2px;
}

我的目标是在 CSS 中将多个图标与文本垂直对齐为下面：

请看 jsfiddle： here

提前谢谢.....

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

如果你可以更新你的 HTML 结构来包装 img 元素，这里有一个基于 flex 的解决方案：

.container {
  display: inline-block;
}

.agsjsTOCNode {
    padding-top: 1px;
    padding-bottom: 1px;
    direction: rtl;
}

.agsjsTOCContent {
    display: flex;
    align-items: center;
    justify-content: center;
}

.agsjsTOCIconContainer {
  display: flex;
  flex: 1;
  justify-content: center;
}

.agsjsTOCLegendLabel {
    font-size: 8pt;
    padding-left: 2px;
}

<div class="container">

  <div class="agsjsTOCNode" id="TOCNode_layer5_0_legend0">
    <div style="padding-left: 36px;">
      <span class="agsjsTOCContent">
        <span class="agsjsTOCIconContainer">
          <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 20px; width:20px;">
        </span>
        <span></span>
        <span class="agsjsTOCLegendLabel">Legend 01</span>
      </span>
    </div>
  </div>

  <div class="agsjsTOCNode" id="TOCNode_layer5_0_legend1">
    <div style="padding-left: 36px;">
      <span class="agsjsTOCContent">
        <span class="agsjsTOCIconContainer">
          <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 25px; width:25px;">
        </span>
        <span></span>
        <span class="agsjsTOCLegendLabel">Legend 02</span>
      </span>
    </div>
  </div>

  <div class="agsjsTOCNode" id="TOCNode_layer5_0_legend2">
    <div style="padding-left: 36px;">
      <span class="agsjsTOCContent">
        <span class="agsjsTOCIconContainer">
          <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 30px; width:30px;">
        </span>
        <span></span>
        <span class="agsjsTOCLegendLabel">Legend 03</span>
      </span>
    </div>
  </div>

  <div class="agsjsTOCNode" id="TOCNode_layer5_0_legend3">
    <div style="padding-left: 36px;">
      <span class="agsjsTOCContent">
        <span class="agsjsTOCIconContainer">
          <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 35px; width:35px;">
        </span>
        <span></span>
        <span class="agsjsTOCLegendLabel">Legend 04</span>
      </span>
    </div>
  </div>


  <div class="agsjsTOCNode" id="TOCNode_layer5_0_legend4">
    <div style="padding-left: 36px;">
      <span class="agsjsTOCContent">
        <span class="agsjsTOCIconContainer">
          <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 40px; width:40px;">
        </span>
        <span></span>
        <span class="agsjsTOCLegendLabel">Legend 05</span>
      </span>
    </div>
  </div>


  <div class="agsjsTOCNode" id="TOCNode_layer5_0_legend5">
    <div style="padding-left: 36px;">
      <span class="agsjsTOCContent">
        <span class="agsjsTOCIconContainer">
          <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 45px; width:45px;">
        </span>
        <span></span>
        <span class="agsjsTOCLegendLabel">Legend 06</span>
      </span>
    </div>
  </div>

</div>

【讨论】：

【解决方案2】：

尝试弹性或网格布局，

parent{
   display: flex;
   align-items: center;
}

这样，您使用的任何图标都比文本大或更小，每次都会对齐。

https://css-tricks.com/almanac/properties/v/vertical-align/

在发帖寻求帮助之前尝试一些研究。

【讨论】：

感谢您的回答。它确实将文本与单个集合的图标（图标+文本）对齐。但是如何垂直对齐每个集合呢？
将该规则提供给包含所有集合的父级。

【解决方案3】：

你可以使用弹性。

.agsjsTOCNode {
    padding-top: 1px;
    padding-bottom: 1px;
    direction: rtl;
    display:flex;
    align-items:center;
    }
    .agsjsTOCContent {
    white-space: nowrap;
}
.agsjsTOCIcon {
    vertical-align: bottom;
}
.agsjsTOCLegendLabel {
    font-size: 8pt;
    padding-left: 2px;
}

 <div class="agsjsTOCNode">
   <span class="agsjsTOCContent">      
 <img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png" alt="" class="agsjsTOCIcon" style="height: 20px; width:20px;">
   </span>
   <span class="agsjsTOCLegendLabel">Legend 01 <br>Legend 02<br>Legend 03</span>
 </div>

就是这样

【讨论】：

【解决方案4】：

只需将您的图标样式更改为：

.agsjsTOCIcon {
    vertical-align: middle;
}

【讨论】：

不幸的是还是一样
抱歉，没听懂。这不是您在问题中提到的所需输出吗？如果没有，请添加更多信息。
它确实将文本与单个集合的图标（图标+文本）对齐。但是如何垂直对齐每个集合呢？
你想要什么？ @AbdulAziz，你能发照片吗？
请检查我原始问题中的第二张图片。感谢你们对我的包容。