Did i do something wrong?

1

Im trying to size and move a picture but its not working, its stuck in this position no matter of what:

[Album] Imgur

My HTML:

<!doctype html>
<html>
<title>Something</title>
<head>
<link rel="stylesheet" type="text/css" href="Something.css">
    </head>
    
<bod>
    
   <div class="container">
    <h1>Something</h1>
    </div>
 
    <div id="image">
    <img src="cool.jpg">
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    </bod>
</html>

CSS:

.container {height: 300px; width: 300px; margin: 0 auto; position: relative; left: 25%;}

#image {width: 100px; height: 100px; position: absolute;}

Any ideas? I managed to move text. But image is not responding at all.

2

You are changing the properties of the div instead of the image. try changing #image to the img tag. Also, you misspelled ‘body’ it’s written ‘bod’ you may want to change that.

If you wanna center and change the image width you can do the follow

<body>
   <div class="container">
    <h1>Something</h1>
    </div>
    <div>
      <img id="image" src="https://i.imgur.com/paaUV5b.png">
    </div>
</body> 


body {
  text-align: center;
}

.container {
//  margin: 0 auto; don't need this line
}

#image {
  width: 100px; 
  height: 100px; 
}
3

Thank you alot, my brain is just not working properly it seems like. Also, why doesnt moving picture to top or bottom work with % but it works with px and cm instead?

4

can you give me an exemple of which properties you’re trying to change?

5

So i used “position : relative” in css in #image and used “top : 30%” and after that “bottom : 30%” but it didnt work, so i used cm instead of % and it worked. And why did aling-text: center put image to the center too?

6

About this percentages thing, I don’t really know. Also, isn’t better for positioning to use margins or padding?

This property describes how inline-level content of a block container is aligned.
Since is an inline-block element, this property applies to as well. as explained here Why does text-align not only center text, but images, too?

1 Like