Progate 道場中級コース position absolute テキストが中央に配置されません。

Question

position absolute　で、画像中央にテキストを配置できません。よろしくお願いします。

<div class="lesson-wrappaer"> <div class="container"> <div class="heading"> <h2>Laern Where to Get Started!</h2> </div> <div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML % CSS</p> </div> <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p>jQuery</p> </div> <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="lesson" > <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p>Ruby</p> </div> <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> </div> <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> </div> </div> </div>

---

.lesson-wrapper{
height:580px;
background-color:#f7f7f7;

}
.heading{
padding-top:80px;
padding-bottom:50px;
color:#5f5d60;
text-align:center;
}

.heading h2{
font-weight:normal;
}

.lesson{
float:left;
width:25%
}

.lesson-icon{
position:relative;
}
.lesson-icon p{
position:absolute;
top:44%;
width:100%;
color:white;
}
.text-contents{
width:80%;
display:inline-block;
margin-top:15px;
font-size:13px;
color:#b3aeb5;
}

Answer 1

lesson-iconクラスのテキストを中央揃えにする。

.lesson-icon {
    position: relative;
    text-align: center;
}

Comments

[sugatti5]

どうもありがとうございます。
おかげ様で解決することができました。
.lesson-icon p{
position:absolute;
top:44%;
width:100%;
color:white;
text-align:center;
}
では、駄目なのでしょうか。