Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Center one and right/left align other flexbox element in HTML
In web development, we often need to center multiple elements while pushing one specific element to the right or left edge. For example, if we have elements P, Q, R, S, T aligned in the center
P Q R S T
We want to keep P, Q, R, S centered while moving T to the right edge
P Q R S T
This layout pattern is common in navigation bars, toolbars, and header sections where you need a centered group with an isolated action button or logo.
Using Auto Margins with Invisible Element
The first approach uses auto margins combined with an invisible flex item to balance the layout. By adding a hidden duplicate of the right-aligned element at the start, the visible elements remain centered.
Example
<!DOCTYPE html>
<html>
<head>
<title>Auto Margins Method</title>
<style>
ul {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
li {
margin: 3px;
padding: 10px;
background: #e74c3c;
color: white;
border-radius: 4px;
}
li:first-child {
margin-right: auto;
visibility: hidden;
}
li:last-child {
margin-left: auto;
background: #f39c12;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<ul>
<li>T</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
</ul>
</body>
</html>
The output shows P, Q, R, S centered with T on the right
P Q R S T
Using CSS Pseudo-elements
The second method uses a ::before pseudo-element to create an invisible balancing element. This approach requires fewer HTML elements while achieving the same visual result.
Example
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-element Method</title>
<style>
ul {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
ul::before {
content: "T";
margin: 3px auto 3px 3px;
padding: 10px;
visibility: hidden;
}
li {
margin: 3px;
padding: 10px;
background: #e74c3c;
color: white;
border-radius: 4px;
}
li:last-child {
margin-left: auto;
background: #f39c12;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<ul>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
</ul>
</body>
</html>
This produces the same centered layout with T positioned on the right edge.
Using CSS Grid Layout
CSS Grid provides a more flexible approach by creating multiple columns and positioning items in specific grid areas. This method offers precise control over element placement.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Method</title>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr repeat(4, auto) 1fr;
grid-column-gap: 5px;
justify-items: center;
align-items: center;
}
li:nth-child(1) {
grid-column-start: 2;
}
li:last-child {
grid-column-start: 6;
justify-self: end;
}
li {
padding: 10px;
background: #e74c3c;
color: white;
border-radius: 4px;
}
li:last-child {
background: #f39c12;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<ul>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
</ul>
</body>
</html>
The grid creates six columns: two flexible outer columns (1fr each) and four auto-sized center columns for P, Q, R, S. Element T is positioned in the last column and aligned to the end.
Comparison of Methods
| Method | HTML Changes | Browser Support | Flexibility |
|---|---|---|---|
| Auto Margins | Requires duplicate element | Excellent (all modern browsers) | Limited to simple layouts |
| Pseudo-elements | Clean HTML structure | Excellent (all modern browsers) | Good for fixed content |
| CSS Grid | No additional elements needed | Modern browsers (IE11+) | Highly flexible and scalable |
Conclusion
All three methods effectively center multiple elements while positioning one element at the edge. The auto margins approach works well for simple cases, pseudo-elements offer cleaner HTML, and CSS Grid provides the most flexibility for complex layouts. Choose the method that best fits your project's requirements and browser support needs.
8K+ Views
