Hello,
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!
Hello,
As simple as Flexbox appears, I persistently have troubles with the most simple of adjustments.
Please could someone point out why my
Kind regards!
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)
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.
Rob.
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">
<div>
<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>
</div>
</section>
</div>
#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! 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