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!

    K
    kazberryAuthor
    Participating Frequently
    January 8, 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>

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


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

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