Skip to content

Instantly share code, notes, and snippets.

@gleenk
Created July 15, 2013 15:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gleenk/6000935 to your computer and use it in GitHub Desktop.
Save gleenk/6000935 to your computer and use it in GitHub Desktop.
Horizontal Vertical Centering Header
<header>
<div><h1>Titolo del sito fighissimo yeah </h1></div>
<nav>
<ul>
<li>olè olè</li>
<li>olè olè</li>
<li>olè olè</li>
<li>olè</li>
</ul>
</nav>
</header>
* {
margin:0;
padding:0;
line-height:1em;
font-size:100%;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
header {
text-align: justify;
letter-spacing: 1px;
height: 6em;
padding: 2em 10%;
background: #2c3e50;
color: #fff;
}
header > div,
header h1,
header nav {
display: inline-block;
}
header::after,
header:after {
content: '';
display: inline-block;
width: 100%;
vertical-align:middle;
}
header h1 {
height: 100%;
}
header > div::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
header > div {
width: 50%;
height: 100%;
text-align: left;
}
header li {
display:inline-block;
margin:0 1em;
}
@media screen and (max-width: 820px){
header {
height: auto;
}
header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment