Index

How to put an inline element (span) in the middle of the block element?

We have html structure like that in our ListController: 
<div id="hline">
  <div id="print_download">
    <div id="print">
      <span class="text">Print</span>
    </div>
  </div>
</div>

The CSS statements are next:

body{font-size:12px;}
#hline{height:24px; width:400px; background:tomato;}
#print_download{width:300px; background:royalblue;}
#print{width:200px; background:yellow;}
.text{background:plum;}

I use the different backgrounds and width properties only for the visual presentation.
Print

It seams that it is easy to put the 'Print' to the middle of the header line using padding-top:??? for the parent <div>, I use 4px;
#print{padding-top:4px;}
Print

Not good .text{padding-top:8px;} and as you know the margin-top and the height properties are ignored for inline elements.
Print

It seams that it is work. No, just for some 'DEMO' or this presentation. But for real application these 2 solution are css mistakes. The CSS mistakes are not like a Perl or a C++ ones. Such css works, but until... Let's see. We decided that our font-size for the 'Print' is too small, or the 'header line' should have 35px height (to squeeze some another elements).
Print

And we again have to recalculate the pixels for our padding.
To use position:relative; top:4px; for the .text element - suffers with the same problems, additionally you have to be sure about surrounding elements that can be positioned too (the positioned elements create they own flow stack).
Such kind of the css mistakes sometimes very hard to find, especially if the markup structure contains many nested elements which use they own margin, padding, position.

The right solution is to use .text{line-height:24px;} (the same height as the parent element with property - 'height').
Print

Now it is a stable css structure: #print_download{height:35px;} .text{line-height:35px;} that represents a desired result.
Print

But is is not full story. See Vertical 2