'HTML/CSS - How would I center the name link in this div?

Hi I'm trying to leave the image alone and center the name "Tim Heidecker" in this div.. http://jsfiddle.net/4huq3/

Thanks for the help.

htmlcss


Solution 1:[1]

Updated your fiddle. http://jsfiddle.net/thomas_peklak/4huq3/24/

#left {
    width: 228px;
    height: 60px;
    border: 1px solid #000;
}
#left a{line-height:60px}

.icon {
    vertical-align:middle

}

Solution 2:[2]

try adding vertical-align:middle; to your .icon rule

Solution 3:[3]

What I did was add an id to the tag with the name link, then position it. See this forked jsfiddle:

http://jsfiddle.net/98RhD/10/

Solution 4:[4]

You could use absolute positioning like this:

HTML:

<div id="left"><a href="..." class="icon"><span>Time Heidecker</span></div>

CSS:

#left { position: relative; width: 228px; height: 60px; border: 1px solid #000; }
#left span { position: absolute; top: 15px; left: 70px; }

You'll have to fiddle with the numbers to get exactly your final center position according to the size of the text and final box and / or if you want vertical centering (CSS Top) or horizontal centering (CSS Left).

I hope this helps!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 topek
Solution 2 hair raisin
Solution 3 Matt H
Solution 4 dSquared

Related Questions