How to vertically center text?

Question

I am trying to create a promotion where a picture is on the left and text on the right. How would I vertically center the text so that it appears in the middle of the photo? I have tried using margin and vertical-align, but they did not work.

In addition, why does the div with the text not appear on the same line as the div with the image, even though their widths are both set at 50%?

Here is my HTML and CSS:

.main-promotion .image {
 display: inline-block;
 vertical-align: top;
 width: 50%;
 height: 100%;

}

.main-promotion img {
 width: 100%;

}

.main-promotion .description {
 display: inline-block;
 text-align: center;
 width: 50%;
 height: 100%;
 font-size: 2vw;
 
}

   

<div class="main-promotion">
    <div class="image">
        <img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
    </div>

    <div class="description">
        <h3> Get access to the morning routine used by world-class performers for FREE! </h3>
        <p> We'll send it to you immediately! </p>
        <button> Click me! </button>
    </div>
</div>

Thank you in advance for your help!

Setting width to 49% on either of the 2 divs makes them show up next to each other. Also if you do not want the font-size to change, why are you using vw? — seBaka28, Jun 20 '19 at 17:58
@seBaka28 Haha, I just realized that! Thanks for telling me! — Henry Wang, Jun 20 '19 at 17:59
Have you looked into CSS Grid Layout at all? https://css-tricks.com/snippets/css/complete-guide-grid/ — fauverism, Jun 20 '19 at 18:03

BJRINT · Accepted Answer · 2019-06-20T18:12:13.963

2

See Flex display, with align-items:center;

    .main-promotion{
        display: flex;
        align-items: center;
    }

You can then also remove inline-block and vertical-align properties from your children properties.

edited Jun 20 '19 at 18:12

answered Jun 20 '19 at 18:08

BJRINT

639
3
8

Could you please tell me what ```align-items``` does? Does it center everything? – Henry Wang Jun 20 '19 at 18:10
@Henry Wang Basically flex acts as a wrapper that defines how children behaves in it instead of defining the behavior on each child. See [this guide on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) to get a better understanding of the concept. Flex also becomes useful to create responsive ( = mobile friendly) design, since you don't have to redefine a rule for each child-components but instead just modify how the wrapper behaves at certain breakpoints width (thanks to media queries). – BJRINT Jun 20 '19 at 18:18

score 0 · Answer 2 · answered Jun 20 '19 at 18:05

Add css attribute position and float:

.main-promotion .image {
 display: inline-block;
 vertical-align: top;
 width: 50%;
 height: 100%;
 position:relative; float:left

}

.main-promotion img {
 width: 100%;

}

.main-promotion .description {
 display: inline-block;
 text-align: center;
 width: 50%;
 height: 100%;
 font-size: 2vw;
 position:relative; float:left
}

   

<div class="main-promotion">
    <div class="image">
        <img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
    </div>

    <div class="description">
        <h3> Get access to the morning routine used by world-class performers for FREE! </h3>
        <p> We'll send it to you immediately! </p>
        <button> Click me! </button>
    </div>
</div>

score 0 · Answer 3 · answered Jun 20 '19 at 18:06

0

Sounds like you need display: flex on your parent div. And then alter the size of the img a bit.

https://codepen.io/raqem/pen/BgpYwj

answered Jun 20 '19 at 18:06

Raqem

424
2
9

How to vertically center text?

3 Answers3

Linked