The image is an inline element and margin:auto does not apply to inline elements . On its own you would need display:block on the image for auto margins to work.
When the image is a direct child of a flex parent (i.e. picture.picture has display:flex applied) then it becomes a flex item (it is no longer treated as an inline element) and the margin will then take effect.
Yes if you make the image display:flex then it also works with auto margins as would display values of table, grid and others but only those that have a block basis. E.g inline- block will not work with auto margins.
Note also that position absolute elements will also obey auto margins in the right structure.
In CSS my underatanding is that default position when approcahing is
X axis follows this way → and
Y axis follows this way ↓ (-ve Y axis as compared to mathematical cordinates)
Currently when we are not using any positioning(absolutee, relative, fixed, sticky) when we click it appears top and bottom linear blocks are rotating as if they are hinged in between and the rotation is from the center of those lines?
Hi there, I have a general question in this pseudo method: before and after is it a mandate that we have to position them absolute with parent real HTML property as a relative? Because I browsed various examples and found that a consistency?
It’s probably easiest to explain if you imagine before and after are behaving exactly like this html.
<span class="before"> I'm the content 'before' the existing content in this div</span>
I'm the content in this div.
<span class="after"> I'm the content 'after' the existing content in this div</span>
When you add content using before and after it will render exactly like the html above. The content will be inserted before and after the content in that div and behave like inline content just like a span.
The reason position:absolute is used a lot (with a relative parent) is that a lot off times the elements are used for decoration and special effects which in the most case require them to be placed somewhere other than inline.
If you just think of before and after as empty spans in your div then you can style them exactly as you would do with those spans (the benefit being that you don’t need to add extra empty spans to your mark up).
If you change the transition speed to 5 seconds you can see the magic
The top and bottom lines are the top and bottom borders of the button itself.
The middle line is two lines on top of each other to make one line (:before and :after).
When clicked one line is rotated 45deg and one is rotated -45deg. Because they are both in the exact same space they transition nicely without needing to translate or do anything fancy. The top and bottom lines are just hidden during the change.