Question 191194 in Html Question posted in
Some basic documentation can be found here.

Html – Unordered list items slightly off center from one another

I’m having issues with unordered list items being slightly off center from each other. I’m very new to this. Can anyone advise?

I thought using center align would result in all text being symmetrical but each list item is slightly askew. I also tried using list-style-position: inside; as per other answers but this didn’t seem to help.

.list {
  text-align: center;
  padding-left: 0;
  list-style-position: inside;
  font-style: normal;
  font-family: cursive;
  color: teal;
  display: block;
  border-spacing: 5px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 92.35%;
  background-color: bisque;
}
<div class="header">
  <h1> Birthday Time!</h1>

  <div class="list">
    <h3> What to bring:</h3>

    <ul>
      <li> Balloons</li>
      <li> Pinata</li>
      <li> Crisps</li>
    </ul>
  </div>
Tags:

2

Answers


  1. 0

    To center the bullet point dots of an unordered list (ul) to be in line with the already centered text, you can use CSS to style the list and adjust its positioning. Here’s an example of how you can achieve this:

    .container {
  text-align: center;
}

.centered-list {
  list-style-position: inside;
  padding-left: 0;
  display: inline-block;
  text-align: left;
}
    <div class="container">
  <ul class="centered-list">
    <li>Item 1</li>
    <li>Item 22222</li>
    <li>Item 33</li>
  </ul>
</div>
    Login or Signup to reply.
  2. 0 
    .list {
  text-align: center;
  padding-left: 0;
  list-style-position: inside;
  font-style: normal;
  font-family: cursive;
  color: teal;
  display: block;
  border-spacing: 5px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
  width: 92.35%;
  background-color: bisque;
}

.list ul {
  text-align: left;
  padding: 0;
  display: inline-block;
}
    <div class="header">
  <h1> Birthday Time!</h1>

  <!--Date-->
  <h2> On the 13th March </h2>
  <img class="cake" src="https://i.pinimg.com/originals/a9/72/bd/a972bdeb55940936f87036c7d4b14dfb.jpg" alt="picture of a birthday cake styled as mountains" width="300">
  <br>
</div>

<!--Item list-->
<div class="list">
  <h3> What to bring:</h3>
  <ul style="">
    <li> Balloons</li>
    <li> Pinata</li>
    <li> Crisps</li>
  </ul>  
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search