How To CSS

About how to

make element in the center both position

2 div, outer, inner

1. use position transform

<div class="outer"> <div class="inner"> </div> </div>

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;}

W3Schools online HTML editor

CSS Layout - Horizontal & Vertical Align

https://www.w3schools.com/css/css_align.asp

Center Align Elements

.To horizontally center a block element (like <div>), 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; }