Highlighted

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

Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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>

Views

1.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 04, 2018 0
Adobe Community Professional ,
Jan 04, 2018

Copy link to clipboard

Copied

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>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2018 1
Community Beginner ,
Jan 04, 2018

Copy link to clipboard

Copied

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

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2018 0
LEGEND ,
Jan 05, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8">

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

<div class="product">

<img src="http://kifergraphics.com/cranberry-cheesecake.jpg" alt="cheesecake">

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2018 1
Community Beginner ,
Jan 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
Adobe Community Professional ,
Jan 08, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
Community Beginner ,
Jan 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
LEGEND ,
Jan 08, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 1
Adobe Community Professional ,
Jan 08, 2018

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 Flexbox Order</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<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 class="container-fluid">

<div class="row row-eq-height">

<!--BEGIN 2 COLUMNS-->

<div class="col-sm-6 align-self-center a">

<img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder">

</div>

<div class="col-sm-6 align-self-center b">

<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 class="col-sm-6 align-self-center c">

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

</div>

<div class="col-sm-6 align-self-center d">

<img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder">

</div>

<div class="col-sm-6 align-self-center e">

<img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder">

</div>

<div class="col-sm-6 align-self-center f">

<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 class="col-sm-6 align-self-center g">

<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 class="col-sm-6 align-self-center h">

<img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder">

</div>

</div>

</div>

<!--First jQuery then Popper then Bootstrap 4-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Latest Bootstap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
Community Beginner ,
Jan 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
Adobe Community Professional ,
Jan 08, 2018

Copy link to clipboard

Copied

Maybe because I used online placeholder images.

Remove mine, save.

Reinsert yours, save.

Switch to Live View.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
Community Beginner ,
Jan 08, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
Adobe Community Professional ,
Jan 08, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 08, 2018 0
LEGEND ,
Jan 09, 2018

Copy link to clipboard

Copied

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>

<meta charset="UTF-8">

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

<div class="product">

<img src="http://kifergraphics.com/cranberry-cheesecake.jpg" alt="cheesecake">

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

<!-- end product -->

<div class="product even">

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

<img src="http://kifergraphics.com/cranberry-cheesecake.jpg" alt="cheesecake">

</div>

<!-- end product -->

<div class="product">

<img src="http://kifergraphics.com/cranberry-cheesecake.jpg" alt="cheesecake">

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

<!-- end product -->

<div class="product even">

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

<img src="http://kifergraphics.com/cranberry-cheesecake.jpg" alt="cheesecake">

</div>

<!-- end product -->

</body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 1
kazberry LATEST
Community Beginner ,
Jan 09, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 09, 2018 0