James's Knowledge Graph

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

CSS recipes Knowledge Graph