# Text in Flexbox - can not center vertically

**URL:** https://forum.pinegrow.com/t/text-in-flexbox-can-not-center-vertically/2917
**Category:** General
**Created:** [April 9, 2019, 7:15pm UTC](https://forum.pinegrow.com/t/text-in-flexbox-can-not-center-vertically/2917 "2019-04-09T19:15:37Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![jtkay](https://avatars.discourse-cdn.com/v4/letter/j/9f8e36/32.png) [@jtkay](https://forum.pinegrow.com/u/jtkay)
#### Post date: [April 9, 2019, 7:15pm UTC](https://forum.pinegrow.com/t/text-in-flexbox-can-not-center-vertically/2917/1 "2019-04-09T19:15:37Z")

</div>

In the image, I have a div that takes up that cell of the grid. It is set to flex and, as you can see, I have already centered it. I can not, however, vertically center it. It must be something easy that I am missing. Any ideas?

![Flex-Text](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/139486c9697ae060799355c5beb5e328adc73edb.png)

---

<div class="post-metadata">

### Author: ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)
#### Post date: [April 10, 2019, 8:22am UTC](https://forum.pinegrow.com/t/text-in-flexbox-can-not-center-vertically/2917/2 "2019-04-10T08:22:05Z")

</div>

Purely Flexbox spoken, you need to think in Parent and Child (element).

So HTML spoken, something like this:

```
    <div data-pg-name="Parent" class="banner-settings">
        <h1>What a banner</h1>
        <h3>Centering Text by Flexbox</h3>
        <p>This is just a lil approach</p>
    </div>

```

In words, you have a wrapping DIV as parent and a few lines of semantic stuff (H1, H3 and p) as child items. The parent has a class of banner-settings. The properties of this is as follows:

```
.banner-settings {
height: 40vh;
background-image: url('../img/reginald-hero-scene.jpg');
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

```

}

Image spoken - it’ll look like this:

 ![Users_thomaskimmich_Dropbox_Apps_updog_lab_theMagicPlugin_Reginald-TMG-1_00-beta_template_reg-test_html-Pinegrow_Web_Editor-_WP](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/7/7f3e1ef36d158cb352bd5e5e713fc9ce263df806.jpeg)

OK - that’s the theory of Flexbox. But if you mix this with “Grid”, I’m not really aware of the How-to. In theory (and if there is nothing specific in Grid rules to define), the cell is the parent - so it needs to be set to display flex. Or just adding a parent DIV to the p-TAG?

And yes - a height is required doing the magic of vertically center stuff.

Cheers

Thomas