How do i use the display property to block?

Tell us what’s happening:
This lesson tells me that after i finish ,i should try to use the display property and use block to move an image…i tried everything and it didn’t work please help

Your code so far


<style>
  div {
    background-color: blue;
    height: 100px;
    width: 100px;
    
  }
</style>
<div></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property

i am not sure I understand what you are saying. All the instructions say is to use margin to center the square (block)
so just add a line right after the line for width and specify the margin with value auto.

“This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block.”

it looks like you are quoting something but to what end? Was there a follow up question or a clarified question that you wanted to pose?

the lesson ends with an addition that i can use display to move an image in the same manner i used margin:auto to move the text to the center.The camp in the lesson didn’t ask me to move an image to the center but it gave me a suggestion which i tried to use on an image and miserably failed.

here’s a sample codepen showing centered image.
(also responsively sized based on viewport width for extra measure but even if it was fixed size, the code works)

1 Like
div { background-color: blue; height: 100px; width: 100px; margin:auto; }

here is a solution.
here how it works; adding auto as margin apply same space from both ends.
think of block elements as a solid box with fix width.
In Codepen https://codepen.io/hbar1st/pen/vamOrW provided by you, even without try removing margin-left or margin-right. it will shift the image on one end side.

1 Like

hi there, not sure I understood you but the codepen above in my post shows a perfectly centered (and responsive) image.

1 Like

when u specify the width of an element is take that much of space on the screen, the rest of space is what auto property divide equally;
example: 100 px wide screen with 40px width element, the rest of 60 px is equally divided into 30px each side with auto

1 Like