CODEWITHSUNDEEP
htmlcss
Berimbolo
Berimbolo

Reputation: 313

List Alignment with CSS

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

 14.88
18.123
20.452
 10.22
  3.1

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.

Upvotes: 1

Views: 11347

Answers (4)

Jon P
Jon P

Reputation: 19772

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/

Upvotes: 2

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

.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>

Upvotes: 0

Jaya Parwani
Jaya Parwani

Reputation: 167

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

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

Upvotes: 0

Saurabh Tiwari
Saurabh Tiwari

Reputation: 5151

You are using text-align:center.

Try the same with:

.my-list {
  text-align: left
}

This should do it.

Upvotes: 0

Related Questions