How can i position my image to CSS? Ps: i'm completely new to HTML and CSS

Hey guys,

I’m completely new to HMTL coding and I’m onto CSS. I’m trying to experiment with my coding thru my lessons, but somehow I couldn’t position my <img> with a correct attributes like id and class but nothing seems to work on CSS anchor. I’ve searched everywhere but no luck. Thank you for anyone who answers my question.

Hey there and welcome to the forums @denzelsugayan6884482 :slight_smile:

Could you please post your HTML and CSS so users can see what you are trying to do? It could be you are on the right track but have a small error somewhere in your code.

Note that HTML code must be formatted to display as code. In order to do this, simply press this button:

Then copy/paste your code between the two lines of backticks:

Are you stuck trying to target the image with a selector? Or are you actually having a hard time with the styling? To target it you could give the <img> a class or an id:

<!--class-->
<img class="image1">

<!--id-->
<img id="image1"> 

And then target it by using that class or id;

// to use a class add a period to the class name
.image1 {
  //styling
}

// to use an id add a pound sign to the id name
#image1 {
  //styling
}

If you are having trouble with the actual positioning, I believe you can use all the same styling techniques as the <div>, and there are oh so many.

For example, if you want an exact pixel position for your element you could declare its’ positioning as absolute, which moves it to the browser top left corner, and then specify the values of top, left, right, and bottom to move it relative to that position of the screen:

#image1 {
  position: absolute;
  top: 50px;
  left: 50px;
}

// This will move the image 50 pixels down, and 50 to the right, of 
// the top left corner.

If you want to position an element relative to its own position, instead of relative to the top left corner of the browser, you can specify its’ position as relative instead of absolute.

If you would like to position the element relative to elements around it, you could specify its margin which changes the amount of space between it and the surrounding elements:

#image1 {
  margin: 50px;
}
// this makes the element have at least 50px of space between itself and
// other elements.

To be more exact you can specify margin-top, margin-bottom, margin-left, and margin-right, which change the space between elements on each of those sides.

This are of course only some basic ways of positioning an element and there are MANY more, but it should give you a good starting place.

1 Like

HI there,

I’m sorry about posting to a different semantic, this is my first time asking so forgive me. Thank you for making a concise explanation on my question, I forgot <img> was a self-closing tag in HTML. I guess my initial problem was positioning my image to certain point in my browser, like centering them. But I’m trying to learn every step of the way, so thank you for answering my concerns. :slight_smile:

2 Likes

:sweat_smile: Wow, I just noticed I screwed that up in my above post and wrote closing tags… My apologies if I threw you off track.


Setting the text-align property to center may work for you, as it can center more than just text, including image elements.

2 Likes

hi, lol it’s okay, i’m always learning. i’m gonna try the advice you gave, anyways, you’ve been very helpful, i appreciate that.:relaxed:

2 Likes