css - Center span/text vertically inside h1 -

i'd center span element inside h1 tag. tried to set line-height seems center span not text next it. note: can't use position absolute "icon" not displayed , can have different widths.

see fiddle i've created: http://jsfiddle.net/jjhcy/1/

html:

<h1>     <span class="icon">icon</span>     text related icon  </h1>   

css:

  .icon      {     background: aqua;     border: 1px solid blue;     font-size: 80%;     border-radius: 3px;     width: 40px;     line-height: 13px;     padding: 2px;     display: inline-block;     text-align: center;     }       h1     {     background: red;     font-size: 11px;     line-height: 18px;     } 

any idea?

your css works. more obvious if increase line-height:

see demo @ http://jsfiddle.net/audetwebdesign/pueay/

h1 {     background: red;     font-size: 40px;     line-height: 80px; } .icon {     background: aqua;     border: 1px solid blue;     border-radius: 3px;     padding: 0px 4px;     width: auto;     display: inline-block;     font-size: 20px;     line-height: 40px;     vertical-align: 7px; } 

in example, both span , text vertically aligned in center, think want.

how works...

the css engine uses vertical-align property align baseline of text segments.

in case, set default font-size , line-height h1 40px , 80px respectively.

for .icon, reduce font-size , line-height 50%. if vertical-align set baseline or 0, both smaller , larger text align along bottom of letters, not centered because icon text has smaller font size.

by adjusting vertical-align 7px, got centering looks pretty good. not precise process, may work enough.