リスト(li)の文字の位置がズレる

Question

画像の通り、リストの最後の行の文章が下にズレてしまいます。
コードは以下になります。

.box29 {
    margin: 2em 0;
    background: #dcefff;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.box29 ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  background: #f5faff;
}
.box29 ol li {
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.box29 ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="box29">
<div class="box-title">おすすめポイント</div>
<ol>
<li>文章文章文章</li>
<li>文章文章文章文章</li>
<li>文章文章文章文章</li>
</ol>
</div>

原因が分からず困り果てております。
初歩的な質問になってしまっていると思いますが、ご回答頂けますと幸いです。

※追記
wordpressテーマのスタイルシートに、以下のような記述がありました。こちらも関係してくるのでしょうか？

ol {
	list-style-type: decimal;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 30px;
	margin-bottom: 20px;
}

ol li {
	font-size: 17px;
	line-height: 27px;
}

追記②
リストの②（2行になっている行）を本来は画像1枚目のように表示したいのですが、画像2枚目のように、文字の真ん中に数字が移動してしまいます。何か解決法はありますでしょうか？

Answer 1

多分ol li:last-child{padding-bottom:0;}みたいな指定がいるんじゃないかと推測
ずれてるのは文字じゃなくて丸数字の方

li要素の中央に丸数字が来るようにしてるけど
最後のliだけ高さが違うから丸数字の位置がずれる

丸数字の位置の指定をliの真ん中に来るようにする指定ではなく
一行目の中央に来るような指定にするか
paddingを一括指定するのではなく
padding-top,padding-bottomは
個別に指定するとかしたら直るかも

Comments

[marimokkori0724]

ありがとうございます！
確かに数字がズレていたので、ol li:last-child{padding-bottom:7px;}でピッタリ合わせる事ができました。すごくスッキリしました。本当にありがとうございます。

もう1つ問題点が浮かびあがって来たのですが（追記②）、もしお時間がありましたらご回答頂けますと幸いです。

※「解決法は分かるけど、別の質問として投稿して欲しい」という場合はおっしゃってください。まだteratailのシステムについて把握し切っていないのですが、切り分けて質問した方が良いのではないか？考えておりますので。

[KazuhiroHatano]

top:50%;をtop:20px;ぐらいにすればいいんじゃないですかね

[marimokkori0724]

ご提示頂いたコードで解決しました！
何から何まで本当にありがとうございました。
おかげさまで良いブログ記事が書けそうです。
また機会がありましたらご回答よろしくお願い致します。

Answer 2

提示されたHTMLとCSSだけでは再現しないんですが。

Comments

[marimokkori0724]

wordpressに導入しているテーマのスタイルシートに、リストに関する記述がありましたので、追記させて頂きました。
こちらで再現しますでしょうか？

[Daregada]

しませんね。追加されたCSSを先に書こうが後に書こうが、影響は受ける(font-sizeなど)ものの、ベースラインの位置は変わりません。

[marimokkori0724]

お返事ありがとうございます。再現が出来なかったとの事で、申し訳ありません。
ol li:last-child{padding-bottom:7px;}で解決しました。
また何かありましたらご回答よろしくお願い致します。