How do i use the display property to block?

How do i use the display property to block?
0

#1

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


#2

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.


#3

“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.”


#4

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?


#5

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.


#6

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)


#7
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.


#8

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


#9

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