Домашняя работа "Как добавить на сайт блок с навыками", есть вопрос

Прошел начальный курс “Знакомство с HTML и CSS”. Там присутствую домашние задания по сайту портфолио. В дз с блоком навыков мне захотелось добавить на полоски прогресса цифры в процентах, как это было в главе Основы CSS. И вот какой результат получил:

Цифры не хотят попадать по центру в div и съезжают.

Методом проб и ошибок понял, что мешает параметр задающий высоту. Как только я его убираю, цифры отображаются как надо:

Но я хочу контролировать высоту и сделать прогресс бар уже. Что я делаю не так?)) Видимо нужно еще какое то свойство. Подскажите, пожалуйста)

<div class="">
          <h3>Мои скиллы</h3>
          <dl class="skills-list">
            <dt>Первый скилл</dt>
            <dd class="level"><div style="width: 60%">60%</div></dd>
            <dt>Второй скилл</dt>
            <dd class="level"><div style="width: 40%">40%</div></dd>
          </dl>
        </div>

.level {
  margin: 4px 0 16px; 

  padding: 0px;
 /* height: 20px; */ 
  background-color: #ffffff;
  border: 1px solid #86c3fa;
  border-radius: 8px;

} 

 .level div {
  margin: 1px;
  /*height: 18px;*/ 
  background-color: #288be6;
  border-radius: 6px;
  font-size: 10px;
  text-align: center; 
  padding: 0px;
  color: #ffffff;
}


Код почти не трогала, но отображается красиво.

1 Симпатия

А вот вы в свой код добавьте height как у меня (там где у меня закомментированно сейчас), для обоих блоков и текст сразу плывет. Не могу понять почему. Я хочу сам выставить высоту этих полосок прогресса, но что-то идет не так)))

В таком разе предлагаю добавить вот такую штуку:
line-height:60px;
Так как нам в данном случае нужно отцентровать только 1 строку, мы можем задать высоту этой строки такого же размера, как исходный элемент класса level.

1 Симпатия

Вот это то что было нужно) Спасибо большое.

1 Симпатия