3

I've been trying to center my text with my Fontastic.me icons.

Here's my code:

HTML:

<html>
 <div id="info">
    <ul>
        <li id="chat"><span class="icon-comment-discussion"></span><p>We offer the best & simplest chat system on the web.</p></li>
</ul>
</div>
</html>

and my CSS:

#chat {
line-height: 72px;
vertical-align: middle;
}

It doesn't line up at all, and nothing changes when I change the vertical-align option. I'm thinking maybe it's because my text is in a paragraph tag; but I wanted to ask here first.

Solved: I added the vertical-align: middle; to:

#chat span {

}

it worked perfectly.

Cœur
  • 37,241
  • 25
  • 195
  • 267
zyphal
  • 79
  • 6

1 Answers1

0

Paragraphs as standard will have margins applied to them, you can try to remove the margin to see if that helps, or place the icon inside the paragraph.

p{ margin:0; }
Chris Conway
  • 56
  • 4
  • I'm sorry, I forgot to say that I have a reset.css applied. I tried your idea but it didn't work unfortunately. I also tried putting the icon inside the paragraph and that didn't work either :/ – zyphal Jul 12 '14 at 23:59
  • The font awesome icons are all mono spaced / sized I believe, so you should be able to give a fixed pixel value to the vertical align on the icon itself. Try this... .icon-comment-discussion{ vertical-align:-10px; } – Chris Conway Jul 13 '14 at 00:11