How to Horizontally Center an Unordered List Within a Div?

Horizontally Center Unordered List within Div

Problem: Centering an unordered list (

) horizontally within a div using CSS poses a challenge. Attempts to align the list using "text-align: center" or left positioning (left: 50%) have proved unsuccessful.

Goal: The goal is to achieve proper horizontal alignment of the list within the div container.

Solution:

To center a

element horizontally within a div, you can employ various CSS techniques:
1. max-width and margin: Set the maximum width of the
   element and add left and right margins of "auto" to automatically center it within the parent div.
   • display: inline-block and text-align: Set the display of the
     element to "inline-block" and apply "text-align: center" to the parent div. The
     element will then align itself as a text element within the centered text.
     • display: table and margin: Similar to the previous technique, set the display of the
       element to "table" and apply "margin: auto" to align it centrally.
       • position: absolute, translateX, and left: This method requires setting the position of the
         element to "absolute" and using the left and transform properties to translate it 50% in the opposite direction and center it horizontally.
         • Flexbox Layout: Utilize the Flexible Box Module by setting the display of the parent div to "flex" and applying "justify-content: center" to center the
           element within it.

Example Code:

/* Solution 1: max-width and margin */
.container ul {
    max-width: 400px;
    margin: 0 auto;
}

/* Solution 2: display: inline-block and text-align */
.container-2 {
    text-align: center;
}

.container-2 ul {
    display: inline-block;
}

/* Solution 3: display: table and margin */
.container-3 ul {
    display: table;
    margin: 0 auto;
}

/* Solution 4: position: absolute, translateX, and left */
.container-4 ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Solution 5: Flexbox Layout */
.container-5 {
    display: flex;
    justify-content: center;
}

.container-5 ul {
    list-style-position: inside;
}

By applying one of these solutions to your CSS, you can effectively center the unordered list horizontally within the div container.

The above is the detailed content of How to Horizontally Center an Unordered List Within a Div?. For more information, please follow other related articles on the PHP Chinese website!