responsive site with media queries... how to center text vertically

Report · Jan 04, 2018

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.

Report · Jan 04, 2018

There are different ways of doing this but I think this is the simplest.

<!doctype html>

<head>

<title>Vertically Centered</title>

<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>

Something here

</div>

<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>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 04, 2018

That works! Looks like "col" and "row" are built-in classes. I guess I need to read up on Bootstrap.

Thank you!

Report · Jan 05, 2018

Flexbox will do this for you along with some other really nice stuff. If you are going to use Bootstrap then use v4 as that has Flex built in by default.

The example code below is using Flexbox without Bootstrap.

<!DOCTYPE html>

<html>

<head>

<title>Flex Vertical Center</title>

<style>

* {

box-sizing: border-box;

}

.product {

display: flex;

flex-wrap: wrap;

align-items: center;

width: 90%;

margin: 0 auto;

}

.product img {

width: 40%;

}

.product p {

width: 56%;

margin: 0 0 0 4%;

}

@media screen and (max-width: 768px) {

.product img {

width: 100%;

}

.product p {

width: 100%;

margin: 30px 0 0 0;

}

</style>

</head>

<body>

<p>Years of experience have tempered our fine pastry bakers who combine their innate artistic talents with the disciplined training required by their craft to create cakes and desserts which are both beautiful and delicious. Use the links above to see more photos of our cake creations.</p>

</div>

</body>

</html>

Report · Jan 08, 2018

This works well too! I'll have to play with both methods to see which is better for my more complex pages. Thank you!

Report · Jan 08, 2018

kazberry wrote
This works well too! I'll have to play with both methods to see which is better for my more complex pages. Thank you!

Don't try to combine floats with flexbox. Use one or the other.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 08, 2018

Okay, I'll get rid of floats. My pages have the product and descriptions alternating left and right, as shown here: Vertically Centered

But how can I get the descriptions to always go below the photo when in small-screen view?

Kathy

Report · Jan 08, 2018

Im not at my computer until tomorrow but if you have used flexbox as a solution you can reorder your containers at your media query break points to stack them in the order you require.

Someone will give you guidance lm sure. If not and you can wait check the thread tomorrow and lll sort some code out for you.

Report · Jan 08, 2018

That's a new wrinkle that can only be conquered with ordering content in Flexbox layouts.

Below is my example with Bootstrap 4:

<!doctype html>

<head>

<title>Bootstrap 4 Flexbox Order</title>

<style>

html, body {height: 100% }

/**flexbox order on small devices**/

@media screen and ( max-width: 560px) {

.a {order: 1;}

.b {order: 2;}

.c {order: 4;}

.d {order: 3;}

.e {order: 5;}

.f {order: 6;}

.g {order: 8;}

.h {order: 7;}

</style>

</head>

<body>

</div>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

</div>

</div>

</div>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 08, 2018

This works, but now my images only show if I use absolute paths. Why?

Report · Jan 08, 2018

Maybe because I used online placeholder images.

Remove mine, save.

Reinsert yours, save.

Switch to Live View.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 08, 2018

Okay it worked that time. Odd. I just needed your authority behind me I guess. Thanks, Nancy.

Report · Jan 08, 2018

If you decide to use Bootstrap 4 Flexbox layouts, I urge you to thoroughly read the documentation. It's essential to understand the various built-in classes and what they do so you can save time and avoid re-creating unnecessary CSS code.

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 09, 2018

You may want to consider using a less contrived html structure i.e., keeping most of what you need in the css code. Just by adding order: 2; to the class .product p in the css media query you can ensure the text goes beneath the images on smaller window devices.

Depends what you want - spend some time learning some simple html/css workflows or battling with Bootstrap. You have to learn and remember the Bootstrap classes for it to be of any use to you so you may as well spend that time learning/writing your own html and css . In this example we use meaningful class names like 'product' and 'even' row whereas as in Bootstrap you get to use col-md-6 and you have to introduce more and more class names into the html structure like align-self-center h.

<!DOCTYPE html>

<html>

<head>

<title>Flex Vertical Center/Flex order</title>

<style>

* {

box-sizing: border-box;

}

.product {

display: flex;

flex-wrap: wrap;

align-items: center;

width: 90%;

margin: 0 auto;

}

.product img {

width: 40%;

}

.product p {

width: 56%;

margin: 0 0 0 4%;

}

.even p {

margin: 0 4% 0 0;

}

@media screen and (max-width: 768px) {

.product img {

width: 100%;

}

.product p {

width: 100%;

margin: 30px 0 0 0;

padding: 0 0 30px 0;

order: 2;

}

</style>

</head>

<body>

<p>Years of experience have tempered our fine pastry bakers who combine their innate artistic talents with the disciplined training required by their craft to create cakes and desserts which are both beautiful and delicious. Use the links above to see more photos of our cake creations.</p>

</div>

<p>Years of experience have tempered our fine pastry bakers who combine their innate artistic talents with the disciplined training required by their craft to create cakes and desserts which are both beautiful and delicious. Use the links above to see more photos of our cake creations.</p>

</div>

<p>Years of experience have tempered our fine pastry bakers who combine their innate artistic talents with the disciplined training required by their craft to create cakes and desserts which are both beautiful and delicious. Use the links above to see more photos of our cake creations.</p>

</div>

<p>Years of experience have tempered our fine pastry bakers who combine their innate artistic talents with the disciplined training required by their craft to create cakes and desserts which are both beautiful and delicious. Use the links above to see more photos of our cake creations.</p>

</div>

</body>

</html>

Report · Jan 09, 2018

Osgood, that's a good point about learning Bootstrap - seems like a lot to learn when I was very close to being done with just HTML and CSS. I did not know about this CSS rule called "order" that you used, which nicely solves my stacking problem. Also I like what you did there with the "even" class.... which fixes the margin alignment issue of the text and photos.

If only CSS had a "center-vertically" property, that would be wonderful. But adding the Flex rules with "align-items: center" is not too much of a learning curve.

I will see if I can simplify my HTML and move more of it to the CSS as you suggest.

Thank you!

Kathy

responsive site with media queries... how to center text vertically

1 Correct answer