Middle alignment of font icon with text on right

Question

Following is my fiddle in which I am trying to vertically align the text with Icon Font. Kindly let me know what's an appropriate way to do such alignment:

How can I vertically align the font icon with the text on this fiddle

Wrong output:
[ICON]Text
 Text Text 

Expected Output:

       Text
[ICON] Text
       Text

That's a bootply not a fiddle :) - so I suppose you need this using bootstrap — Danield, May 11 '14 at 11:53
@DOCTYPEHTML no not like that, icon is not vertically aligned and solution is not generic — soft genic, May 11 '14 at 11:58
@Danield nah using bootstrap css is not necessary, I just want to know how the trick works when icon is not an image and its a font — soft genic, May 11 '14 at 11:59

score 1 · Answer 1 · answered May 11 '14 at 13:48

You can simply make the icon float (bootply #1):

.panel-title .glyphicon {
    float: left;
    margin-right: 10px;
}

but I prefer using Block Formatting Context (BFC) properties when it comes after a floating element (needs an extra element to enclose your text). It basically creates a column along your float instead of letting your text wrap around it as usual (bootply #2):

HTML:

<a href="#collapseFour">
    <span class="left mr1 glyphicon glyphicon-file"></span>
    <span class="bfc">Reports Reports Reports Reports Reports Reports Reports</span>
</a>

CSS:

.left {
    float: left;
}
.bfc {
    overflow: hidden;
}

score 0 · Answer 2 · answered May 11 '14 at 12:13

0

div it.

put the icon in a separated div, like this:

<div>
    {icon}
</div>
<div>
    {text}
</div>

and put them inline. display:inline-block... this should work.

answered May 11 '14 at 12:13

asertym

120
1
1
6

did you put the "display:inline-block" to both divs? – asertym May 11 '14 at 12:22
I have no idea what you did wrong, but here, i did a fiddle. I roughly did the situation, and you see it works. just make 2 blocks, displayed inline, it shall work. Here's the fiddle: http://jsfiddle.net/B5jfx/ – asertym May 11 '14 at 12:34

score -1 · Answer 3 · answered May 11 '14 at 12:04

-1

you can make a little table like this

 <table>
  <tr>
    <td valign="middle">[ICON]</td><td>Text<br>Text<br>Text</td>
  </tr>
</table>

answered May 11 '14 at 12:04

manxten

67
2

oh boy, I know about this solution but don't really like this workaround. I thought there is some better way to do this – soft genic May 11 '14 at 12:07
Please see [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) *whatyearisit.jpg* – FelipeAls May 11 '14 at 13:52

Middle alignment of font icon with text on right

3 Answers3