Texte in verschiedenen Größen vertikal ausrichten <a>

Question

Ich möchte ein Zusatzzeichen (plus) und einen Text daneben ausrichten, da das "+" zu klein ist, wird es mit einem Tag vergrößert. Dies verursacht, dass der Charakter zu groß wird, was es für mich schwierig macht, sie auszurichten. Wie würde ich + Zeichen und Text gleichmäßig nebeneinander ausrichten?

Dies ist der Code: http://jsfiddle.net/rs75V/

Answer 1

Sie versucht haben,

vertical-align:middle; 

oder

vertical-align:-10%; 

? This sieht gut für mich aus.

Answer 2

Versuchen um mit diesem zu spielen:
http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Ich denke, es ist das, was Sie suchen, es hat eine Tonne von verschiedenen Möglichkeiten, Textausrichtung nach oben oder unten zu bewegen.

Answer 3

Es ist hackish, aber das sollte funktionieren.

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%; 
} 

Answer 4

Try this:

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

Answer 5

Versuchen Sie a und span schweben.

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; 
} 

Answer 6

Sie können die Spannweite als Inline-Block anzuzeigen, und dann padding verwenden drauf ...

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; 
}