画像を横並びにして中央に揃えたい

現在この添付しこの画像を横一列に揃え文字を画像上下に添えて中央に揃えるにはどうしたらよいでしょうか

HTML`

   <div class="lesson-item">
     <p>テキスト</p>
   <img src="画像URL">
   <p2>テキスト</p2>

　　　　</div>
</div>

    <div class="lesson-item">
      <p>テキスト</p>
   <img src="画像URL">
   <p2>テキスト</p2>

　　　　</div>
</div>
</div>

CSS}
.lesson-items {
height: 600px;
margin-top: 100px;
margin-bottom: 100px;
}
.lesson-item{
float: left;
margin-left: 10px;
display:block;}
.lesson-item img{
height: 20%;
width: 20%;
}
.lesson-item p{
font-size:12px;
margin-bottom: 10px;
}
.lesson-item p2{
font-size:14px;
margin-bottom: 10px;
}

行動規範の内容に同意します

回答1件

ベストアンサー

「中央に揃える」というのが、揃える対象、何を基準にするのか不明確です。

とりあえず、親要素に対して、水平位置、垂直位置を中央にする場合の設定を回答しておきます。

css
1.lesson-items {
2  height: 600px;
3  margin-top: 100px;
4  margin-bottom: 100px;
5  display: flex;           /*子要素を横並び*/
6  justify-content: center; /*水平位置中央寄せ*/
7  align-items: center;     /*垂直位置中央寄せ*/
8}
9.lesson-item{
10  margin-left: 10px;
11}
12.lesson-item img {
13  display: block;
14}
15.lesson-item p{
16  font-size:12px;
17  margin-bottom: 10px;
18}
19.lesson-item .p2 {
20  font-size:14px;
21  margin-bottom: 10px;
22}

ちなみに、HTMLに p2 というタグがありますが、そのようなタグは存在しないので、pにしてください。
他のpと別のCSSを設定したい場合はクラスを付加してください。

html
1<div class="lesson-items">
2  <div class="lesson-item">
3    <p>テキスト</p>
4    <img src="https://placehold.jp/200x200.png">
5    <p class="p2">テキスト</p>
6  </div>
7
8  <div class="lesson-item">
9    <p>テキスト</p>
10    <img src="https://placehold.jp/200x200.png">
11    <p class="p2">テキスト</p>
12  </div>
13
14
15  <div class="lesson-item">
16    <p>テキスト</p>
17    <img src="https://placehold.jp/200x200.png">
18    <p class="p2">テキスト</p>
19  </div>
20</div>