I have a container with a small fixed height and a width of 100%. It is \[code\]display:block\[/code\].Inside there are two similar elements containing text. They have different \[code\]font-size\[/code\]s and are floated - one to the left and the other to the right.
HTML\[code\]<header> <h1 class="right">Title</h1> <h2 class="left">Slogan</h2></header>\[/code\]CSS\[code\]header{ position:fixed; width:100%; height:5em; }header h1{ font-size:3em; margin:0; }header h2{ font-size:2em; margin:0; }\[/code\]I don't want to use \[code\]display:table-cell\[/code\]. And I can't use \[code\]line-height\[/code\] because I am only using \[code\]em\[/code\] and not \[code\]px\[/code\] and \[code\]font-size\[/code\]s of the text elements are different.How can I vertically center the text elements?