Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create centered ordered list with HTML/CSS?

Tags:

html

css

I'd like to create a simple centered ordered list like the following:

    1. one
   2. three
  3. fifteen
    4. two

Everything I'm trying makes the number align flush to the left, rather than stay to the right next to the item. How do I get the result above?

like image 720
Jubal Avatar asked Sep 21 '11 02:09

Jubal


People also ask

How do I center a list in HTML CSS?

Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ). If you want to do it with margin for whatever reason, look into width: fit-content; .

How do you center a list in HTML w3schools?

Step 2) Add CSS:Center-align the <div> element, and change the display of <ul> to inline-block .


1 Answers

use

<style type="text/css">
 .centered { text-align: center; list-style-position:inside;}
</style>    

<ol class="centered">
  <li>one</li>
  <li>three</li>
  <li>fifteen</li>
  <li>two</li>
</ol>
like image 192
CBRRacer Avatar answered Oct 26 '22 21:10

CBRRacer