[CSS] Meaning of margin:auto

Background

Sometimes we need to fulfill situation which we want to line up several components in a row and the last component leans on the right most of the div

Solutions

This comes to marginLeft/Right: auto, when we try to mark the container component with margin-left: auto, the container takes all the spaces available to the left hence position the switch button at the right most of the container.

That explains why when we left / right margin the DIV, we can center it at the center.

References

• What does margin auto mean?
  
• What is the meaning of `auto` value in a CSS property.
  

[HTML&CSS] Vertical align 2 elements

Background

Very often we want to align 2 DIVs vertically and middle aligned with each other, like image and div, or 2 DIVs.

How

1. Declare the css "display: flex" or "display: inline-flex" at the parent container with "align-items: center"
2. Put the items we want to align inside the parent container

Quoting from stackoverflow's answer

References

• css: vertical-align image with text inside span
  
• https://wcc723.github.io/css/2017/07/21/css-flex
• A Complete Guide to Flexbox
  

[CSS] Keeping DIVs Side by Side

Problems
Making DIVs left and right side by side with the same height is a "always wants to accomplished" task, having the same height of 2 divs ensure the best alignment and appearances upon designing our UI.


Solutions
First we set the outer div to display: flex, and the inner 2 divs to flex: 1, the purpose is to told the browser that 2 child DIVs are of the same proportion. 

And that's it ! Now no matter what content is in the 2 DIVs, they will always share the same height

References
- https://stackoverflow.com/questions/2997767/how-do-i-keep-two-side-by-side-divs-the-same-height