How do I align the bullets to middle in a <li> tag?

Question

So I want to create a bar like that. I found a code about it and I modified it a little bit, originally it was a timeline. So my problem is that I can't align the bullets to middle in the li tag. How could I achive that?

ul.language-bar {
        max-width: 29em;
        width: 100%;
        padding: 0 18px;
        height: 2em;
        margin: 0;
        padding: 0;
        font-size: 10px;
        /* change font size only to scale*/
    }

    ul.language-bar li {
        width: 15%;
        float: left;
        height: 100%;
        list-style: none;
        position: relative;
        margin: 0;
    }

    ul.language-bar li.empty:before {
        background: #fff;
        border: 0.3em solid #f98d9c;
        box-sizing: border-box;
    }


    ul.language-bar li:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: #f98d9c;
        width: 2em;
        height: 2em;
        border-radius: 2em;
        z-index: 2;
    }

    .language-container .language-bar {
        justify-content: center;
        display: flex;
    }

<div class="language-container">
  <ul class="language-bar">
    <li></li>
    <li></li>
    <li></li>
    <li class="empty"></li>
    <li class="empty"></li>
  </ul>
</div>

Answer 1

With some changes for a shorter CSS...

:root {
  --scale: 20px;
}
.language-container  {
  display: table;
  margin: 0 auto;
}
.language-container ul {
  list-style     : none;
  font-size      : var(--scale);
}
.language-container ul li {
  display: inline-block;
  position: relative;
  background: #f98d9b;
  width: 2em;
  height: 2em;
  border-radius: 2em;
}
.language-container ul li.empty:after {
  position: absolute;
  left: 0.3em;
  top: 0.3em;
  content: '';
  display: block;
  width: 1.4em;
  height: 1.4em;
  border-radius: 1.4em;
  box-sizing: border-box;
  background: #fff;
}

<div class="language-container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="empty"></li>
    <li class="empty"></li>
  </ul>
</div>

Answer 2

By not trying to center an absolutely positioned pseudo element, like you're currently doing.

You will have to nest a block element inside of the li element and center that.

Like so:

ul.language-bar {
        max-width: 29em;
        width: 100%;
        padding: 0 18px;
        height: 2em;
        margin: 0;
        padding: 0;
        font-size: 10px;
        /* change font size only to scale*/
    }

    ul.language-bar li {
        width: 15%;
        float: left;
        height: 100%;
        list-style: none;
        position: relative;
        margin: 0;
    }

    ul.language-bar li.empty span {
        content: '';
        display: block;
        position: relative;
        margin: 0 auto;
        background: #fff;
        border: 0.3em solid #f98d9c;
        box-sizing: border-box;
        width: 2em;
        height: 2em;
        border-radius: 2em;
        z-index: 2;
    }


    ul.language-bar li span {
        content: '';
        display: block;
        position: relative;
        margin: 0 auto;
        background: #f98d9c;
        width: 2em;
        height: 2em;
        border-radius: 2em;
        z-index: 2;
    }

    .language-container .language-bar {
        justify-content: center;
        display: flex;
    }

<div class="language-container">
  <ul class="language-bar">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li class="empty"><span></span></li>
    <li class="empty"><span></span></li>
  </ul>
</div>

This is obviously quick and dirty to illustrate the point and would need to be optimized.

Another possibility would be to use Flexbox for the layout. Still, it needs a separate element inside of the li elements to work.

Answer 3

You need to add these three lines to your ul.language-bar li:before class

position: absolute;
left: 50%;
margin-left: -1em;

This will

1. unbind bullets to make it possible to position them directly

2. move every bullet to the center of its parent li (since it is the first parent element having positions:relative)

3. shift every bullet 1em (half of bullet's width) to the left to make it perfectly centred.

ul.language-bar {
        max-width: 29em;
        width: 100%;
        padding: 0 18px;
        height: 2em;
        margin: 0;
        padding: 0;
        font-size: 10px;
        /* change font size only to scale*/
    }

    ul.language-bar li {
        width: 15%;
        float: left;
        height: 100%;
        list-style: none;
        position: relative;
        margin: 0;
    }

    ul.language-bar li.empty:before {
        background: #fff;
        border: 0.3em solid #f98d9c;
        box-sizing: border-box;
    }


    ul.language-bar li:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        background: #f98d9c;
        width: 2em;
        height: 2em;
        border-radius: 2em;
        z-index: 2;
        position: absolute;
        left: 50%;
        margin-left: -1em;
    }

    .language-container .language-bar {
        justify-content: center;
        display: flex;
    }

<div class="language-container">
  <ul class="language-bar">
    <li></li>
    <li></li>
    <li></li>
    <li class="empty"></li>
    <li class="empty"></li>
  </ul>
</div>