Skip to main content
K
kazberry
Participating Frequently
January 4, 2018
Answered

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

  • January 4, 2018
  • 1 reply
  • 3040 views

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.

    This topic has been closed for replies.
    Correct answer Nancy OShea

    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>

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 4, 2018

    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— Product User & Community Expert
    K
    kazberryAuthor
    Participating Frequently
    January 5, 2018

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

    Thank you!

    O
    osgood_
    Legend
    January 9, 2018

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


    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>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices