Skip to content

Instantly share code, notes, and snippets.

@ViktorovEugene

ViktorovEugene/vertical_align.html

Created September 22, 2016 17:34
Show Gist options
  • Save ViktorovEugene/f85d24d9b287de4be92c7ea966a5709d to your computer and use it in GitHub Desktop.
Save ViktorovEugene/f85d24d9b287de4be92c7ea966a5709d to your computer and use it in GitHub Desktop.
Download ZIP
Vertical centering with `vertical-align: middle;`
Raw
vertical_align.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-size: 16px;
margin: 0;
}
.wrapper {
width: 500px;
height: 500px;
padding: 5px;
background: lightgreen;
border: 1px dashed gray;
margin: auto;
}
.container {
max-width: 100vw;
background-color: steelblue;
border: 1px dashed gray;
box-sizing: border-box;
padding: 50px;
/* THE MEANINGFUL PART COMES BELOW! */
height: 100%;
/* the next property is not required but can help if the content has a
minimal length. Then it will not be moved to the next line if this
length is reached */
white-space: nowrap;
}
.container > * {
/* Put the white spacing value back to the normal */
white-space: normal;
}
.article {
border: 1px solid black;
text-align: left;
background: white;
display: inline-block;
vertical-align: middle;
}
.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container"
><div class="article">
<p class="text-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A eos
laborum necessitatibus obcaecati perferendis. Facilis harum iure
iusto officiis quae!
</p>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment