Horizontal Alignment of Unordered List (UL) Within a Div
To center a
Solution 1: Using Flexbox
.container {
display: flex; /* Enables flexbox layout for the div */
justify-content: center; /* Aligns the div's children horizontally */
}Solution 2: Using Margin Auto
.container ul {
margin: 0 auto; /* Aligns the ul horizontally to the center of the div */
}Solution 3: Using Text Align
.container {
text-align: center; /* Aligns the div's children horizontally */
}Solution 4: Using Absolute Positioning
.container ul {
position: absolute;
left: 50%; /* Positions the ul 50% from the left, effectively centering it */
transform: translate(-50%, 0); /* Counteracts the 50% left position */
}Solution 5: Using a Block Element
.container ul {
display: inline-block; /* Makes the ul behave like an inline element */
text-align: left; /* Aligns the ul's text to the left */
}Choose the solution that best fits your specific requirements and browser support needs.
The above is the detailed content of How to Center an Unordered List Inside a Div?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
