TEST PAGE http://kifergraphics.com/test-of-vertical-align.html
Here is a stripped-down page that shows my issue. When the screen is wide, the text sits at the top of a large empty space. It would be better if the text were in the middle of that space. I've tried a few methods that I found, but none that worked with media queries. How should I do this?
Thanks in advance.
There are different ways of doing this but I think this is the simplest.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**vertically aligned in medium, large displays only**/
@media only screen and (min-width: 768px) {
.sameheight {
display: table;
table-layout: fixed
}
.equal {
display: table-cell;
vertical-align: middle;
width:50%;
}
}
</style>
</head>
<body>
<div class="row sameheight">
<div class="col equal">
Something here
</div>
<div class="col equal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni perspiciatis ducimus modi nobis quas, nisi molestias magnam eos quia beatae, quos omnis at, officia unde voluptatibus labore cumque repudiandae iusto.</p>
</div>
</div>
</body>
</html>
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
AdChoices