List Alignment with CSS

Question

I have a list that displays numbers with decimals. I want them all aligned in the center but they have different decimal lengths so it's kinda causing some UI issues.

Example its current displaying something like

Its current HTML & CSS is simply

.my-list {
  text-align: center
}

<ul class="my-list">
  <li>14.88</li>
</ul>

Can anyone show me how to update my CSS so it displays something like this

14.88
18.123
20.452
etc

In short I want the list to be aligned on the center, but I want the list items to be aligned on the left.

Possible duplicate of [Aligning decimal points in HTML](https://stackoverflow.com/questions/1363239/aligning-decimal-points-in-html) — rsjaffe, Aug 08 '18 at 06:17
"I want them to align in the center but at the same time snap to the left most part." This makes no sense, unless you want the list to be centered with the list items aligned left. — Jon P, Aug 08 '18 at 06:31
@JonP Yes I want the list to be on the center, but the items to be aligned left — Berimbolo, Aug 08 '18 at 06:34

Jon P · Accepted Answer · 2018-08-08T06:49:53.250

Assuming you want the list itself centered with the items left aligned:

Option 1: Using the list as a block but a fixed width

ul {
  padding: 10px;
  list-style-type: none;
  background-color:#ccc;
  width: 25%;
  /*Centers the list*/
  margin: 0 auto;
}

/*Not required in my example, but you may need it*/
li
{
  text-align:left;
}

 <ul>
    <li>14.88</li>
    <li>18.123</li>
    <li>20.452</li>
    <li>10.22</li>
    <li>3.1</li>
  </ul>

Option 2: Wrap the list in a div and set the list to inline-block

div {
  /*Centers this list*/
  text-align: center
}

ul {
  padding: 10px;
  list-style-type: none;
  background-color: #ccc;
  display: inline-block;
  /*Left align contents of list*/
  text-align: left;
}

<div>
  <ul>
    <li>14.88</li>
    <li>18.123</li>
    <li>20.452</li>
    <li>10.22</li>
    <li>3.1</li>
  </ul>
</div>

See this article for more centering options: https://css-tricks.com/centering-css-complete-guide/

score 0 · Answer 2 · answered Aug 08 '18 at 06:21

0

You are using text-align:center.

Try the same with:

.my-list {
  text-align: left
}

This should do it.

answered Aug 08 '18 at 06:21

Saurabh Tiwari

4,632
9
42
82

score 0 · Answer 3 · answered Aug 08 '18 at 06:29

0

You can try list-style css property for the same, to remove the bullets

.myList{
  text-align:left;
  list-style:none;
}

answered Aug 08 '18 at 06:29

Jaya Parwani

167
1
6

Yes but if I do a left align everything will move to the left most part... I want them to stay in the Center but just the numbers properly aligned – Berimbolo Aug 08 '18 at 06:34

score 0 · Answer 4 · answered Aug 08 '18 at 06:39

0

.mylist{
list-style:none;
width:100px;
}
.mylist li{
text-align:center;
}

<!DOCTYPE html>
<html>
<body>
<ul class="mylist">
  <li>14.88</li>
  <li>18.123</li>
  <li>20.452</li>
  <li>10.22</li>
  <li>3.1</li>
</ul>  

</body>
</html>

answered Aug 08 '18 at 06:39

Billu

2,733
26
47

List Alignment with CSS

4 Answers4