Align text with new line in the middle of icon

Question

There is an icon with a text in front of it. I can align the text in the middle of icon by using style="vertical-align: middle;"

So below works fine:

<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i> a Big Arrow.

The problem is when we add a <br> the alignment is not work any more ( As the icon is simple character)

<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i> a Big Arrow </br> I mean very Big!

Can you tell me what is the best solution for it!

you can absolutely style a break. for example: http://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br — Phlume, Dec 22 '13 at 06:56

score 2 · Answer 1 · edited Dec 22 '13 at 08:00

2

Use span tag whenever you want to change some portion of the content.......

span {
  display: inline-block;
    vertical-align: middle;

}

enter image description here

edited Dec 22 '13 at 08:00

Alireza Fattahi

answered Dec 22 '13 at 07:09

Asraful Haque

score 1 · Accepted Answer · answered Dec 22 '13 at 06:57

Basically, wrap the label text in a span

<i class="fa fa-arrows-alt fa-5x" style="vertical-align: middle;"></i>
<span class="label">a Big Arrow. <br/> I mean real Big</span>

.label {
    display: inline-block;
    vertical-align: middle;
}

2 Answers2