CODEWITHSUNDEEP
htmllistcss
gsamaras
gsamaras

Reputation: 73444

Position number of li

I have a styled list, where every number is a circle. Moreover, this list is centered. I used to alter top attribute to position the number of a li. However - since this list has been through a lot -, now this attribute doesn't seem to help at first glance.

The problem is that circle of the number is not vertically aligned properly with its li, as you can see in this fiddle.

CSS:

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    display:inline-block;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

In the picture you can see where I would like the circle of the number to lie, in respect with its li.

enter image description here

Note that I had to move it a bit to the right for demonstrating purposes only.

Upvotes: 0

Views: 69

Answers (1)

user3339702
user3339702

Reputation: 26

We can vertically center align these numbers by putting vertical-align:middle for .rounded-list a:before class and remove margin-top and top:50% from this.

Another solution is, we can use position absolute for ".rounded-list a:before" class and position:relative for its parent li and you can adjust numbers position by top and left.

Upvotes: 1

Related Questions