• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Lack of interest Get rid of old school vertical aligning technique

CyberAP

Well-known member
#1
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;
}