HTML + CSS issue, Chrome/Safari vs Firefox text positioning issue

Question

Hello fellow webdesigners and webdesigner wannabes.

Know that I have tried to find a solution for my problem, but as I am quite new to this thing called CSS, it is a bit overwhelming to know what exactly I'm looking for here in terms of making my design compatible.

The text that I am placing inside a div:

http://jsfiddle.net/tsaulic/W22DC/67/

<div id="header-social-icons"><a href="http://test">C</a><a href="http://test">M</a><a href="http://test">F</a></div>

and my CSS

#header-social-icons {
    position: relative;
    float: right;
    width: 90px;
    height: 30px;
    margin: auto;
    padding: 0;
    font-family: "Social Logos";
    text-align: right;
    font-size: 24px;
}

is rendering the same in Chrome/Safari, but it's rendering differently in Firefox. Chrome and Safari both kind of place it closer to the bottom of the div container, and Firefox does the opposite (top). I have tried using a solution from http://www.quirksmode.org/css/clearing.html and I am also using normalize.css (2.1.1)

Note that using both of those does nothing for my problem, it doesn't make it worse or any better.

What am I missing? I tried using margins, lowering the font size (not an overflow issue), increasing the height of the div container and many other things. :(

I want to achieve the text inside the container to be vertically centered. It's not centered in either of the browsers.

Please help.

Another note: All other header divs appear the same across all browsers, except one of my search fields which is positioned like 2px lower in Chrome/Safari than Firefox.

---

just an update: to make it clearer what the issue was... I just had to add the same line-height value as my height, as suggested by AnaMaria.

Like so:

height: 24px;
line-height: 24px;

Answer 1

OK here is what you are loooking for...

vertical-align:middle

WORKING DEMO

Alternative solution:

DEMO

Using line height method.

CSS

#header-social-icons {
    background-color:#fffdd0;
    width: 100%;
    height: 100px text-align: center;
}

Check these links for more info LINK 1 LINK 2

Answer 2

Add the following CSS to the container div :

vertical-align: middle;
display: table-cell;

Example:

<div style="vertical-align: middle; display: table-cell; height: 500px; width: 400px; border: 1px solid black;">    
    <div id="header-social-icons"><a href="http://test">C</a><a href="http://test">M</a><a href="http://test">F</a></div>
<div>

Answer 3

Well try this :

width: 100%;
text-align: center;

Answer 4

I know you're approaching this via the CSS route, but have you considered formatting within a table? Take a look at this fiddle click here

HTML

<table id="header-social-icons">
    <tr>
        <td>
            <a href="http://test">C</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="http://test">M</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="http://test">F</a>
        </td>
    </tr>
</table>

CSS

#header-social-icons {
    position: relative;
    float: right;
    width: 90px;
    height: 30px;
    margin: auto;
    padding: 0;
    font-family: "Arial";
    text-align: right;
    font-size: 28px;
}