Skip to content

Instantly share code, notes, and snippets.

@Deityhub

Deityhub/index.html

Created May 13, 2018 14:20
Show Gist options
  • Save Deityhub/eab9bb880e12284f388618d3ef2c60eb to your computer and use it in GitHub Desktop.
Save Deityhub/eab9bb880e12284f388618d3ef2c60eb to your computer and use it in GitHub Desktop.
Download ZIP
How to center a text in the middle of it's containing parent. No matter how one adjust the height or width of the container, it still remains in the middle.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
/*Link the css file here to see how this code works*/
<link rel="stylesheet" href="style.css" >
<title>JS Bin</title>
</head>
<body>
<div class="container">
<section class="container__left">
<p>
left section
</p>
</section>
<section class="container__right">
<p>
right section
</p>
</section>
</div>
</body>
</html>
Raw
style.css
.container {
width: 80%;
margin: auto;
color: yellow;
}
.container__left {
width: 50%;
float: left;
background: rgb(90, 90, 90);
}
.container__right {
width: 50%;
float: right;
background: rgb(200, 200, 200);
}
.container__left,
.container__right {
height: 500px;
display: table;
text-align: center;
}
p {
display: table-cell;
vertical-align: middle;
}
@Deityhub
Copy link
Author

initial code snippet to show how this works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment