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!