[Resolved] Page Hero center heading

[Paul]

Hey,

Using VH as height for the page-hero class… Having troubles getting the text to not center. Let me know if you know a fix. Thanks 😉

[Paul]

.page-hero {
	background-image: linear-gradient(180deg, #2d5488 0%, #3ab3d7 100%);
	min-height: 21vh;
	color: #fff;
}
.inside-page-hero {
	position: relative;
    vertical-align: middle;
}
.page-hero h1 {
	font-weight: 600;
}

[Leo]

Hi there,

So you don’t want the text to center?

What’s your horizontal alignment setting here?
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

Let me know 🙂

[Paul]

Hey,

Yea i want it centered.. also centered vertically … But I am using VH as the container height..

[Leo]

Edit your CSS to this:

.page-hero {
    background-image: linear-gradient(180deg, #2d5488 0%, #3ab3d7 100%);
    min-height: 21vh;
    color: #fff;
    display: flex;
    align-items: center;
}

[Paul]

Holy smoke 😉 Thank you very much!

[Leo]

Flexbox is super useful for things like this if you are interested:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Glad I could help 🙂

[Paul]

Thanks !

[Leo]

No problem 🙂

[Author]

Posts