Reputation: 73444
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
.
Note that I had to move it a bit to the right for demonstrating purposes only.
Upvotes: 0
Views: 69
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