> For the complete documentation index, see [llms.txt](https://gzqsjtu.gitbook.io/workspace/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gzqsjtu.gitbook.io/workspace/css/how-to-css.md). # How To CSS About how to ## make element in the center both position 2 div, outer, inner 1. use position transform ![\
\
\
\
](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-Lhgwlr1sK2R7MZL4CcZ%2F-Lhh1b8MCp_OH6mauCkn%2Fimage.png?alt=media\&token=18cff12b-0b36-440d-9ca2-de3d2dcc9ea2) ![](https://4116032991-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgnugJ0SdX2tMAwP37V%2F-Lhh2DSijjAEVArSq9_1%2F-Lhh2LoZnQ7A1jfs54LM%2Fimage.png?alt=media\&token=9782bb7e-3b6e-407c-8983-bbcb3e3f9d69) ## Make multiply divs in a line. 3\. methods left flex ## Hoverable Dropdown Move the mouse over the button to open the dropdown menu. Dropdown Link 1 Link 2 Link 3 .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #3e8e41;} {% embed url="" %} ## CSS Layout - Horizontal & Vertical Align #### [`https://www.w3schools.com/css/css_align.asp`](https://www.w3schools.com/css/css_align.asp) #### Center Align Elements .To horizontally center a block element (like \
), use `margin: auto;` center { margin: auto; width: 50%; } #### Center Align Text .center { text-align: center; } #### Center an Image img { display: block; margin-left: auto; margin-right: auto; width: 40%; } #### Left and Right Align - Using position .right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } #### Left and Right Align - Using float .right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }