Image positioning in CSS

Hey James, I guess changed the spelling and it worked! Thanks for your help!

Great I've signed up! Thanks for the link to codepen too :)

Jonathan Wood - In general here on the forum if you don't have specific experience with the video/code challenge they are having issues with it is best to move on to another question that is more in your area. It generally results in less confusing for the newbies.

Thanks and rock on with your forum'ing

Hiya,

Looks like the image part of the HTML is missing here - can you copy and paste all the HTML, followed by all the CSS into the forum and I'll take a look!

No apologies needed about being a beginner! We're all on here because we're learning something!

Not sure about meetups as I've not looked into that side of things - I'm sure there will be some sort of social side of things though!

Cheers

No worries. I would suggest having a GitHub account (I really like what they're doing) and you can definitely give links out to your code that way.

There are a few sites that let you share CSS/HTML/JavaScript such as CodePen (It seems the Treehouse instructors use this quite a bit), Plunkr, and JSFiddle. I'm sure there are quite a few more out there, as well.

Github repos is a terrible solution for sharing one off bits of code, however Github gists is pretty good for backend code that codepen doesn't support.

Awesome. Actually, I believe the Git courses on here also use GitHub and the help on the site is very useful. We're all here to help, if needed, as well!

Hi Becky,

Thanks - from the HTML and the CSS you pasted in, I'm not seeing any reference to an image? And I believe your problem is that you are trying to align an image?

I would expect to see something in your HTML along the lines of:

<img src="file.jpg">

Or in your CSS

.header {background-image: (url='file.jpg'); }

Is there something missing from the HTML and CSS you pasted?

If I was doing it I'd probably add this in:

<div align="center"> <img src="IMAGE NAME HERE" alt="my image"> </div>

This ought to align the image centrally within the DIV.

Cheers

Ahhh, I think the forum is stripping out HTML - just seen that my answer above is incomplete!

What I was going to suggest you do is either:

<div align="center">
<img src="image goes here" alt="alt text goes here">
</div>

Or alternatively you could do this:

HTML

<img class="center" src="image goes here" alt="alt text goes here">

CSS

img.center {
display: block;
margin-left: auto;
margin-right: auto 

} ... <IMG class="displayed" src="..." alt="...">

Hi Andy, thank you so much for your help. I tried both of these options and they both worked :D

Out of interest, which is more commonly used? Is it better practice to use the div or the class?

Thanks again, really appreciate it :)

Hi Becky,

You're welcome! The CSS solution is the more commonly used solution as it follows the 'web standards' doctrine of keeping markup (HTML) and styling (CSS) separate.

So the HTML calls the image, and the CSS does the alignment bit - the first solution achieves the same result , but by adding the align='center' bit into the HTML we are essentially combining both markup and styling in the HTML document, which isn't ideal!

Cheers

Andy

OK, got it, thanks. Super helpful :)