Flex Box issue (align items?)


As simple as Flexbox appears, I persistently have troubles with the most simple of adjustments.

Please could someone point out why my

is centred but my and

are not?

Kind regards! :smiley:

The div in which those things are placed does not have display: flex. It is nested inside an element with display: flex but itself has display: block. So things inside it will aligned left by default. That would be a place to start.

Also, be careful–your post is displaying the html elements you’re referring to, so I actually had to use the dev tools to see what you’re talking about. You can escape HTML using the backticks (the quote looking things to the left of the 1 key)

1 Like

Thank you so much for the prompt reply.

I have located the backtick on my keyboard (```), but I am unsure about what you are advising me to do with them.

Sorry to bother you again. You’re time is hugely appreciated.


In your original post, you tried to write <h1> , but it ended up just formatting the text and not showing the <h1> (I think?). If you want to output HTML in a forum post, you can enclose them in the triple backticks (or I think even single backticks) and then that will output it as I am doing here.

I must have misunderstood your advice, as I am experiencing the same problem.
Could you have at explaining again?

Here is what I tried…

<div id="welcome-div">
		<section id="welcome-section">
				<h1>LOOK EVERYBODY!</h1>
				<img id="welcome-img" src="https://scontent.flhr4-1.fna.fbcdn.net/v/t1.0-9/1392015_10153318601020313_1727273535_n.jpg?_nc_cat=101&ccb=2&_nc_sid=de6eea&_nc_ohc=iCbU6VnkgB0AX9TQTsu&_nc_ht=scontent.flhr4-1.fna&oh=1b105471f751af0683423e6f094b4778&oe=5FB607F9" alt="Myself, looking absolutely stunning">
				<h2>it is I</h2>
#welcome-div {
	display: flex;
	flex-direction: column;
	align-items: center;

Thank you in advance.

Yep so you’re on the right track - you just need to tell the inner divs that you want them to be display: flex as well

At the moment it’s just the #welcome-section div, and the others are display:block by default

I swear there’s only a certain amount of time I can learn to code in a day! :laughing: After that point my brain turns to mush.

Such an easy fix. I was completely overlooking the fact that there was a div inside the section.

I got rid of the outer division completely and just applied the correct id to the inner div.

Thanks JJ :smile: