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

Html – When I center an ordered list the number goes to a separate line that the list

As stated in the title I text-aligned to center and used list-style-position:inside so that the number would go besides the list but instead it goes to a separate line

<ol>
            <li>
                <h3>Gather ingredients and preheat oven:</h3>
                Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.
            </li>
            <li>
                <h3>Mix dry ingredients:</h3>
                In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.
            </li>
            <li>
                <h3>Mix wet ingredients:</h3>
                In a medium bowl, whisk together milk, butter (or oil), and egg.
            </li>

*{
    text-align: center;
}

ol{
    list-style-position:inside;
    padding:0;
}

and the list becomes
https://phpout.com/wp-content/uploads/2023/06/Hc4DV.png

I want it the number 1 and the header in the same line

Tags:

2

Answers


  1. 0

    Why not use like this?

    .text-center {
  text-align: center;
}
    <div class="text-center">
  <h3>1. Gather ingredients and preheat oven:</h3>
  Preheat oven to 200 degrees. Have a baking sheet or heatproof platter ready to keep cooked pancakes warm in the oven.

  <h3>2. Mix dry ingredients:</h3>
  In a small bowl, whisk together flour, sugar, baking powder, and salt; set aside.

  <h3>3. Mix wet ingredients:</h3>
  In a medium bowl, whisk together milk, butter (or oil), and egg.
</div>
    Login or Signup to reply.
  2. 0

    try this:

     ol {
       list-style-position: inside;
       padding: 0;
    }
    ol h3{
       display: inline-block;
    }

    You will get this result
    [Expected result]
    [1]: https://phpout.com/wp-content/uploads/2023/06/BaHg6.png

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search