CSS recipes
Center elements horizontally
There are many ways to center elements horizontally using CSS; two of the most common ones are using display: flex and margin: 0px auto.
Center elements using display: flex
.flex-centered {
display: flex;
align-items: center;
flex-direction: column;
}Center elements using margin: 0px auto
.margin-centered {
margin: 0px auto; /* sets left and right margins to auto */
width: 80%;
/* display: block; */ /* Uncomment for non-block elements */
}Collapsible list (without JavaScript)
<html>
<head>
<style type="text/css">
[type="checkbox"],
[type="checkbox"]:checked + label .open,
[type="checkbox"] ~ ul,
[type="checkbox"] ~ label .close {
display: none;
}
[type="checkbox"]:checked + label .close,
[type="checkbox"] ~ ul,
[type="checkbox"] ~ label .close {
display: inline-block;
}
</style>
</head>
<body>
<input id="toggle" type="checkbox" />
<label for="toggle">
<span class="open">➕</span>
<span class="close">➖</span>
</label>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</body>
<html>A simpler alternative using HTML5 elements is to use the <summary> and <details> tags:
<details>
<summary>Menu</summary>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</details>Broader Topics Related to CSS recipes
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
Code Recipes
Quick and easy to copy recipes for JavaScript and TypeScript