How to line up an icon with a stacked heading and subtext?

Question

I have been wrestling with lining up an image icon (not a font icon) with a heading and text.

I have found some good examples of how this is done but not with a heading and if so it was using a fontawesome icon which I am trying to avoid.

.soccer-icon {
  width: 50px;
}

.icon-header {
  font-size: 18px;
  line-height: 32px;
  display: block !important;
  padding-right: 20px
}

.icon-area {
  display: flex;
  align-items: center;
}

<div class="icon-area">
  <p>
    <img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
  </p>
  <h3 class="icon-header">Paper Ballot Inspection</h3>
  <p>A full count of the ballots, including scanning and visual inspection of all ballots.</p>
</div>

I ran what you provided on my side and they line up. Are you more so trying to get the text so it's lined up with the middle of the image? — Brandon, Aug 27 '21 at 18:06

score 0 · Answer 1 · answered Aug 27 '21 at 18:31

0

Here you go,

https://jsfiddle.net/2ro6dqay/

I have put both the headings in separate <div>'s and then styled them

answered Aug 27 '21 at 18:31

Salomi Edward

533
4
15

Tanner Dolby · Answer 2 · 2021-08-27T19:06:33.860

You can wrap the <h3> and <p> elements in a parent <div> and make it a flexbox column layout so the text is stacked vertically. Then, remove the default margins from h3 and paragraph elements in that container so they are grouped more closely together.

With your existing align-items: center declaration on .icon-area, this seems to create the style you were going for.

.soccer-icon {
  width: 50px;
}

.icon-header {
    font-size: 18px;
    line-height: 32px;
    display: block;
    padding-right: 20px
}

.icon-area {
 display: flex;
 align-items: center;
 max-width: 80ch; /* for demo */
}

.column {
 display: flex;
 flex-direction: column;
}

.column h3,
.column p,
.icon-area p {
  margin: 0;
}

<div class="icon-area"><p>
   <img class="soccer-icon" src="https://cdn1.iconfinder.com/data/icons/sports-balls-4/32/balls_filled_outline-01-512.png" />
   </p>
   <div class="column">
      <h3 class="icon-header">Paper Ballot Inspection</h3>
       <p>A full count of the ballots, including scanning and visual inspection of all ballots. Some more text to occupy two lines.</p>
   </div>
</div>

How to line up an icon with a stacked heading and subtext?

2 Answers2