How to Center an Unordered List Inside a Fixed-Width Div?

How to Center an Unordered List Within a Fixed-Width DIV

When working with web design, aligning elements vertically and horizontally can be a common task. One such scenario is centering an unordered list (

) within a fixed-width div.

Solution

To achieve centered alignment, a combination of CSS display properties and wrapping elements within a centered div is employed.

First, create a wrapper div and apply the text-align: center property to it. This will horizontally center the content within the div.

Next, wrap the

element within the centered div and apply the following CSS properties:

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

• display: inline-block;: This property allows the
  to behave like an inline element while still occupying a fixed width.
• margin: 0; and padding: 0;: These properties remove any default margins or padding applied to the
  .

Finally, to center the

items within the

, apply the following CSS property:

.wrapper li {
    float: left;
    padding: 2px 5px;
    border: 1px solid black;
}

• float: left;: This property creates an inline layout for the
• items.
• padding: 2px 5px; and border: 1px solid black; (optional): Adjust these values to style the
• items as desired.

By combining these CSS techniques, the

and its
• items will be centered within the fixed-width div, providing a visually appealing alignment.

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