CODEWITHSUNDEEP
htmlcssvertical-alignment
AbdulAziz
AbdulAziz

Reputation: 6278

How to align multiple icons with text vertically in CSS?

I have a following div with some icons and texts (Map lengends) as below:

enter image description here

HTML code for the above:

<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 for the above

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

My target is to align multiple icons with text vertically in CSS as below:

enter image description here

Please see the jsfiddle: here

Thanks in advance.....

Upvotes: 1

Views: 1317

Answers (4)

Sackey
Sackey

Reputation: 402

If you can update your HTML structure to wrap the img element, here is a flex-based solution:

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

Upvotes: 3

fdurna
fdurna

Reputation: 328

You can use flex.

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

thats all

Upvotes: 1

9841pratik
9841pratik

Reputation: 195

Try flex or grid layout, 

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

This way any icon you use BIgger than text or smaller , the pair will be aligned every time.

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

Try some research before posting for help.

Upvotes: 1

bhansa
bhansa

Reputation: 7504

Just change your style for icon to this:

.agsjsTOCIcon {
    vertical-align: middle;
}

Upvotes: 0

Related Questions