Skip to content

Instantly share code, notes, and snippets.

@artofhuman
Created August 24, 2012 07:55
Show Gist options
  • Save artofhuman/3447275 to your computer and use it in GitHub Desktop.
Save artofhuman/3447275 to your computer and use it in GitHub Desktop.
CSS: vertical align
HTML:
<div class="container"> <!-- блок-контейнер -->
<div> <!-- блок с содержанием -->
Элемент, который выравнивается вертикально внутри блока-контейнера.
</div>
<div class="auxiliary"> </div> <!-- пустой вспомогательный блок -->
</div>
CSS:
.container {
display: table-cell;
vertical-align: middle;
height: 444px; width: 333px; border: 1px solid red; /* просто чтобы было видно ;) */
}
*+html .auxiliary {
display: inline-block;
vertical-align: middle;
width: 0px;
height: 100%;
}
*+html .container div {
display: inline-block;
vertical-align: middle;
}
*+html .container div, .auxiliary {
display: inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment