How to vertically center text with larger icon?

Question

I am using a Font Awesome icon in the modal of success. I want to make the icon bigger, the problem is the text is no longer vertically centered if I do that.

<div class="alert alert-success alert-dismissible">
  <span class="fa fa-check-circle" aria-hidden="true" style="font-size: 32px;"></span>
  <strong> You have successfully set up an administration for this client.</strong>
</div>

`vertical-align: middle`? – GreyRoofPigeon Mar 05 '18 at 15:22 — GreyRoofPigeon, Mar 05 '18 at 15:22

score 2 · Accepted Answer · answered Mar 05 '18 at 15:23

2

You can use vertical-align:

.fa {
  vertical-align: middle;
}

jsFiddle

Or, use flexbox:

.alert {
  display: flex;
  align-items: center;
}

jsFiddle

answered Mar 05 '18 at 15:23

Stickers

75,527
23
147
186

score 1 · Answer 2 · answered Mar 05 '18 at 15:23

Have a look at Text alignment - class="text-center" and class="align-middle"

 <div class="alert alert-success alert-dismissible text-center">
     <span class="fa fa-check-circle" aria-hidden="true" style="font-size: 32px;"></span>
     <strong class="align-middle"> You have successfully set up an administration for this client.</strong>
  </div>

score 1 · Answer 3 · answered Mar 05 '18 at 15:27

1

Flexbox solution

.alert{
  display: flex;
  align-items: center;
}

Hope this helps.

answered Mar 05 '18 at 15:27

Gibin Ealias

2,751
5
21
39

How to vertically center text with larger icon?

3 Answers3