CODEWITHSUNDEEP
cssvertical-alignmentfont-size
Hiroki Osame
Hiroki Osame

Reputation: 315

Vertically Align texts with different sizes in <a>

I want to align an addition(plus) mark and text next to it, however, since the "+" is too small, it is enlarged with a tag. This causes the character to become too big, making it hard for me to align them. How would I align the + character and Text evenly next to each other?

This is the code: http://jsfiddle.net/rs75V/

Upvotes: 2

Views: 3308

Answers (6)

sujal
sujal

Reputation: 1050

Try this:

span {
    font-size: 40px;
    line-height: 0;
    vertical-align: middle;
}

Upvotes: 0

Dean_Wilson
Dean_Wilson

Reputation: 190

You can display the span as an inline-block and then use padding on it...

a{
    font-family: arial, sans-serif;    
    background-color: #EEEEEE;


    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #BBB;

    color: #333;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    font-weight:bold;
    font-size:20px;
    display:inline-block;
    cursor:pointer; 

}
span{
    font-size:40px;
    line-height: 0;
    display: inline-block;
    padding-bottom: 9px;
}

Upvotes: 0

Yevgeniy
Yevgeniy

Reputation: 318

Try floating your a and span.

a{
    font-family: arial, sans-serif;    
    background-color: #EEEEEE;

    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #BBB;

    color: #333;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    font-weight:bold;
    font-size:20px;
    cursor:pointer; 
    line-height: 40px;
    float: left;
}
span {
    font-size:40px;
    float: left;
    margin: 0 .1em 0 0;
}

Upvotes: 0

reergymerej
reergymerej

Reputation: 2417

It's hackish, but this should work.

a{
    font-family: arial, sans-serif;    
    background-color: #EEEEEE;


    border: 1px solid #DDDDDD;
    border-bottom: 1px solid #BBB;

    color: #333;
    padding: 4px 10px;
    text-align: center;
    text-shadow: 0 1px 0 #EEE;
    font-weight:bold;
    font-size:20px;
    line-height:40px;
    display:inline-block;
    cursor:pointer; 
}
span{
    font-size:40px;
    vertical-align:-15%;
}

Upvotes: 0

d-_-b
d-_-b

Reputation: 23171

Try playing around with this:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
I think it's what you're looking for, it has a ton of different ways to move text alignment up or down.

Upvotes: 0

Rag
Rag

Reputation: 6593

Have you tried

vertical-align:middle;

or

vertical-align:-10%;

? This looks all right to me.

Upvotes: 4

Related Questions