How to vertically align numbers of ol?

Question

The numbers of the list are moving according to the text length of the li, causing the vertical align to drop. Notice that I have styles the numbers, as you can see in the fiddle.

I tried to use a span, but I couldn't get it working.

CSS

li span { 
    vertical-align: middle;
    display: inline-block;
}

HTML

<ol class="rounded-list center_ol">
    <li class="cool_white"><a href=""><span>Yannis Drogitis</span></a>
    </li>
    <li class="cool_white"><a href=""><span>Dimitris Mariglis</span></a>
    </li>
    <li class="cool_white"><a href=""><span>Kots Mariglis</span></a>
    </li>
</ol>

How to make the numbers align vertically, in respect to every other number in the list?

Not to be confused with this question: Left align ol numbers with the heading in the same “column”

[Here](http://stackoverflow.com/questions/8283285/css-is-there-a-way-to-vertically-align-the-numbers-bullets-before-each-list-ele) is a similar question. Hope you would like it. (y) — Irshad, Nov 11 '15 at 05:04
Isn't that the same attempt I have made @Irshad? I am looking it into. -some minutes later-Yeap, it didn't do the trick! :/ — gsamaras, Nov 11 '15 at 05:05
@gsamaras Do you mean [this](http://jsfiddle.net/divy3993/cmfL2643/25/)? — divy3993, Nov 11 '15 at 05:24

Kelv.Gonzales · Answer 1 · 2015-11-11T19:46:36.460

4

It seems it was inheriting unwanted properties. from li.cool_white. I implemented these CSS base from the link suggested by Irshad.

Updated

I have modified my old code. Instead of body I have created a new class called .outer where any element here would be centered and anything outside would not be.

.center_ol {
    text-align: left;
    list-style-position:inside;
}

.outer {
    text-align:center;
}

.list{
    display: inline-block;
    text-align: left;
}

Updated Results

edited Nov 11 '15 at 19:46

answered Nov 11 '15 at 05:51

Kelv.Gonzales

558
4
13

That's good. However, I would like only the list to be centerized, not the whole `body`. Can you do something about it? – gsamaras Nov 11 '15 at 14:48

score 2 · Answer 2 · answered Nov 11 '15 at 20:13

2

If you change your center_ol rule like this, is yet another way to solve it.

An update of your fiddle is here

h3.center_ol {
    text-align: center;
}
ol.center_ol {
    list-style-position:inside;
    display: table;
    margin: 0 auto;
}

answered Nov 11 '15 at 20:13

Asons

84,923
12
110
165

justinw · Answer 3 · 2015-11-11T15:01:03.373

I am assuming that text-align: center is not mandatory. Simply remove this rule from your elements.

See this fiddle.

If you did, however, want to center the elements, just wrap all the elements in a container (div) - and use a translateX to align the element center without needing to mess with width sizes. It also doesn't rely on text-align: center to position the elements. Check out the fiddle here.

ol.rounded-list {
    counter-reset: li;
    /* Initiate a counter */
    list-style: none;
    /* Remove default numbering */
    *list-style: decimal;
    /* Keep using default numbering for IE6/7 */
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    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;
}
.center_ol {
    list-style-position:inside;
}

div {
    display: inline-block;
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

body {
    position: relative;
}

<div>
    <h3 class="center_ol">Man-to-man suggestions</h3>
    <ol class="rounded-list center_ol">
        <li class="cool_white"><a>Yannis Drogitis</a>

        </li>
        <li class="cool_white"><a>Dimitris Mariglis</a>

        </li>
        <li class="cool_white"><a>Kots Mariglis</a>

        </li>
    </ol>
</div>

@gsamaras updated the fiddle to [this](http://jsfiddle.net/cmfL2643/32/) - it now will be position horizontally centered without `text-align: center` — justinw, Nov 11 '15 at 14:59
@shubhamr238 the code is included in the answer, without the need for the external links - click *Show code snippet* — justinw, Jan 14 '20 at 23:48

score 1 · Accepted Answer · answered Nov 11 '15 at 18:58

As looking to your comments, i think this might help you, but one thing is bit sloppy here that is you need to mention specific width for <a> elements, if you try my solution.

Working : Fiddle

Snippet Below:

ol.rounded-list {
    counter-reset: li;
    /* Initiate a counter */
    list-style: none;
    /* Remove default numbering */
    *list-style: decimal;
    /* Keep using default numbering for IE6/7 */
    font: 15px'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.rounded-list a {
    color: #444;
    text-decoration: none;
    display:block;
    width:125px;
    text-align:left;
    background:;
    margin:0px auto;
}
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: relative;
    left: -1em;
    top: 64%;
    margin-top: -1.3em;
    background: rgba(255, 168, 76, 0.5);
    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;
}
.center_ol {
    text-align: center;
    list-style-position:inside;
    width:60%;
    margin:0px auto;
    border:1px solid red;
    
}

.cool_white
{
    position: relative;
    display: block;
    padding: .4em;
    border-radius: .3em;
    transition: all .3s ease-out;
    border:1px solid green;       
}

<h3 class="center_ol">Man-to-man suggestions</h3>

<ol class="rounded-list center_ol">
    <li class="cool_white"><a>Yannis Drogitis</a>

    </li>
    <li class="cool_white"><a>Dimitris Mariglis</a>

    </li>
    <li class="cool_white"><a>Kots Mariglis</a>

    </li>
</ol>

Your solution is very good.In which situation would the sloppy point harm me? — gsamaras, Nov 12 '15 at 01:55
Glad that it helped you. What i meant here was, you need to give **specific `width`** if you don't do so, it will be of no use. Nothing else. — divy3993, Nov 16 '15 at 16:06
Oh OK divt. BTW, I am having a hard time with this: http://stackoverflow.com/questions/33725501/leftover-hover-effect-on-touch . If you want, take a look! — gsamaras, Nov 16 '15 at 16:07

How to vertically align numbers of ol?

4 Answers4

Linked