Help with a simple CSS question (I think..)


I would need some help with something that’s been driving me crazy the past hour.

I want to center my two paragraph that’s inside a div that’s inside yet another div and being on one line each.

My CSS code looks like this:

.hero {
background-image: url(’…’);
width: 100%;
height: 700px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;

.text-background {
background-color: white;
text-align: center;
height: 300px;
width: 100%;
align-items: center;
justify-content: center;

This code aligns everything in the center both horisontally and vertically, BUT the first paragraph is inline with the second paragraph because of the ‘display:flex’ I think. And even if I do ‘flex-wrap’ they’re still inline (on desktop).

So my question is, how I can make the two paragraphs on one line each and still being centered horisontally and vertically, no matter how big the screen is. I did also try to set the width of both paragraphs to 100%, but didn’t work.

(And I want to use flexbox rules - nothing else, if possible…)

If someone can help me with this I would appreciate it a lot :slight_smile:

if I understand you correctly, you should try flex-direction: column.
That puts each element below the preceding one. And you can still use the flex styles.

What an absolute legend, thank you so much it worked!

1 Like