List is not centering in html Ask Question
By   Junaid A     19-Nov-2024    1

If you're having trouble centering a list in HTML, you can use CSS to achieve the desired result. Here's an example of how you can center a list horizontally and vertically within a container:


<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<div class="container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>
In this example, we create a container element with the class name "container." By using CSS flexbox properties, display: flex sets the container as a flex container, justify-content: center horizontally centers the contents, and align-items: center vertically centers the contents.

Place your list within the container div, and the list items will be centered both horizontally and vertically.

If you want to center the list horizontally only, you can modify the CSS as follows:


<style>
  .container {
    text-align: center;
  }
</style>
By setting text-align: center on the container, the list items will be horizontally centered within the container.

Remember to adjust the class name "container" to match your specific HTML structure if necessary.


Note! very important point is open your page in "Incognito" window of the browser, some time browse cache create the issue.

Solutions


10353
Copyright Future Minutes © 2015- 2024 All Rights Reserved.   Terms of Service  |   Privacy Policy |  Contact US|  Pages|  Whats new?
Update on: Dec 20 2023 05:10 PM