Lack of interest Get rid of old school vertical aligning technique

CyberAP

Well-known member
Right now header logo is centered with a help of line-height. But it's value is fixed. That's not really good if we go responsive.
So the way to improve it is to use a pseudo-element fix.

Here is how:

  • Remove line-height property
  • Add an after pseudo for #logo block and center it vertically
CSS for the pseudo-element:

Code:
#logo:after
{
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
 
Top