CSS Align & Navigation Bars

Introduction

Welcome back to our CSS Tutorial Series! In the previous blogs, we explored how to style and structure web pages, from text styling, managing lists, and creating tables to controlling the display of elements. Now, it’s time to add more advanced elements to your toolkit—forms and counters.

With these advanced topics, you’ll have the power to create even more dynamic and interactive web pages, which is crucial in real-world web development. Let’s get started!

Aligning Elements

CSS provides several ways to align elements:

text-align: Aligns text inside a block element (left, right, center, or justify).
vertical-align: Aligns inline or inline-block elements vertically.
align-items and justify-content: Used with Flexbox for advanced alignment.

Example:

.container { display: flex; justify-content: center; align-items: center; }

This centers the content both horizontally and vertically within the container.

Designing a navigation bar using CSS is an excellent way to practice both positioning and styling techniques.

Example:

<ul class="navbar"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> .navbar { list-style-type: none; background-color: #333; } .navbar li { display: inline; } .navbar li a { color: white; padding: 14px 20px; text-decoration: none; }

CSS Dropdowns

Dropdown menus allow you to display hidden content when a user interacts with a button.

Example:

<div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; } .dropdown:hover .dropdown-content { display: block; }

Request more information

CSS Align & Navigation Bars