文字を重ねた画像を4*3で並べたい

画像の中央に文字を入力した状態で止まってしまっています
この画像を横4縦3の4*3 計12枚配置したいです

何度か試したのですが、どうしても文字が固まってしまったり、一つしか表示されなくなってしまいます。

よろしくお願いします

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8" />
5  <title>sample</title>
6  <link rel="stylesheet" href="sample.css">
7</head>
8<body>
9    <div class="first">
10        <img src =".jpeg">
11        <p>あかさたなはま<p>    
12    </div>
13    <div class="first">
14        <img src =".jpeg">
15        <p>あかさたなはま</p>    
16    </div>
17    <div class="first">
18        <img src =".jpeg">
19        <p>あかさたなはま</p>    
20    </div>
21    <div class="first">
22        <img src =".jpeg">
23        <p>あかさたなはま</p>    
24    </div>
25    
26
27</body>
28</html>

css
1.first {
2    position: relative;
3    width: 500px;
4  }
5
6  .first img {
7    width: 100%;
8  }
9
10  .first p {
11    position: absolute;
12    margin: 0;
13    top: 50%;
14    transform: translatey(-50%);
15    left: 39%;
16    font-size: 60px;
17    color: #ffffff;
18  }　
19

m.ts10806

2020/11/03 13:25

500*4=2000 と結構横幅必要ですけど、そのあたり大丈夫でしょうか。横並びならとりあえずfloatとかclearとか重ねればできますし高さとか均一でいいならいっそtableでもできますが、何をどのように試したのでしょう。

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

回答1件

HTMLはdiv.firstをdiv.wrapperで囲みます。

html
1<div class="wrapper">
2    <div class="first">
3        <img src ="https://placehold.jp/500x300.png">
4        <p>あかさたなはま<p>    
5    </div>
6 
7    <!-- div.first 繰り返し -->
8
9</div>

FlexBoxを使った実装例

css
1.wrapper {
2  display: flex;
3  justify-content: space-between;
4  flex-wrap: wrap;
5}
6.first {
7  position: relative;
8  width: calc(25% - 6px);
9}
10.first img {
11  width: 100%;
12}
13.first p {
14  position: absolute;
15  margin: 0;
16  width: 100%;
17  text-align: center;
18  top: 50%;
19  transform: translateY(-50%);
20  font-size: 3vw; /* フォントサイズは画面幅基準、適宜調整 */
21  line-height: 1;
22  color: #ffffff;
23}

CodePenサンプル

Gridを使った実装例

css
1.wrapper {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr 1fr;
4  grid-gap: 10px;
5}
6.first {
7  position: relative;
8}
9.first img {
10  width: 100%;
11}
12.first p {
13  position: absolute;
14  margin: 0;
15  width: 100%;
16  text-align: center;
17  top: 50%;
18  transform: translateY(-50%);
19  font-size: 3vw; /* フォントサイズは画面幅基準、適宜調整 */
20  line-height: 1;
21  color: #ffffff;
22}