画像とテキストを交互に配置するやり方を知りたい

わからないこと：nth-childを使用して画像とテキストを交互に配置するやり方がわかりません。
目標完成図のワイヤーフレームを添付いたします。
この完成予定図のようにcontainer幅の中に、画像とテキストを１セットとして
４セット分を縦に並べたいです。

行ってみたこと：nth-child、flexbox、position:relative、position:absoluteを行ってみたが、
レイアウトが崩れてしまう。
※添付コードの中の、CSSのセレクタ名.message-text p {　の下のul, li {　から画像とテキストを交互に配置するコードを記入していくと思われますが、現在のコードでは、うまくいきません。
ul, li {　以降の現在のコードは消去して書き直す予定でしたが、
現行コードということで添付させていただきました。

下記にコードを添付いたしました。

ご回答いただけると幸いです。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>ダミーダミーダミー</title>
6    <meta name="description" content="ダミーダミーダミー">
7    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
8    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
9    <link rel="stylesheet" href="ダミーダミーダミー.css">
10</head>
11<body>
12    <div class="top-wrapper">
13        <div class="container">
14            <img class="top-logo" src="ダミーダミーダミー" alt="ダミーダミーダミー">
15        </div>
16    </div>
17    <header>
18        <div class="container header-flexbox">
19            <div><a href="index.html"><img class="header-logo" src="ダミーダミーダミー" alt="ダミーダミーダミー"></a></div>
20            <nav>
21                <ul class="nav-main">
22                    <li><a href="message.html">ダミーダミーダミー</a></li>
23                    <li><a href="effect.html">ダミーダミーダミー</a></li>
24                    <li><a href="recruit.html">ダミーダミーダミー</a></li>
25                    <li><a href="activity.html">ダミーダミーダミー</a></li>
26                </ul>
27            </nav>
28        </div>
29    </header>
30    <div class="message-wrapper">
31        <div class="container">
32            <div class="message-text">
33                <h1>ダミーダミーダミー</h1>
34                <p>ダミーダミーダミー</p><p>ダミーダミーダミー</p>
35</div>
36        </div>
37    </div>
38<div class="activity-wrapper">
39        <div class="container service">
40            <ul class="servicearea">
41                <li class="category">
42                    <div class="pic"><img src="https://placehold.jp/1132x700.png"></div>
43                    <div class="txt">
44                        <h3>見出しが入ります</h3>
45                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
46                            テキストが入ります。テキストが入ります。テキストが入ります。
47                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
48                    </div>
49                </li>
50                <li class="category">
51                    <div class="pic"><img src="https://placehold.jp/1132x700.png"></div>
52                    <div class="txt">
53                        <h3>見出しが入ります</h3>
54                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
55                            テキストが入ります。テキストが入ります。テキストが入ります。
56                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
57                    </div>
58                </li>
59                <li class="category">
60                    <div class="pic"><img src="https://placehold.jp/1132x700.png"></div>
61                    <div class="txt">
62                        <h3>見出しが入ります</h3>
63                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
64                            テキストが入ります。テキストが入ります。テキストが入ります。
65                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
66                    </div>
67                </li>
68                <li class="category">
69                    <div class="pic"><img src="https://placehold.jp/1132x700.png"></div>
70                    <div class="txt">
71                        <h3>見出しが入ります</h3>
72                        <p>テキストが入ります。テキストが入ります。テキストが入ります。
73                            テキストが入ります。テキストが入ります。テキストが入ります。
74                            テキストが入ります。テキストが入ります。テキストが入ります。</p>
75                    </div>
76                </li>
77            </ul>
78 </div>
79    </div>
80</body>
81</html>

css
1@charset "UTF-8";
2    box-sizing: border-box;
3}
4html {
5    font-size: 100%;
6}
7body {
8    font-family: 'Lora', serif;
9    font-family: 'Noto Serif JP', serif;
10}
11a {
12    text-decoration: none;
13}
14.container {
15    max-width: 1170px;
16    width: 100%;
17    padding: 0 15px;
18    margin: 0 auto;
19    padding: 0 4%;
20}
21.top-wrapper {
22    min-height: 100vh;
23    background-image: url(../../images/index/top-bg.jpg);
24    background-size: cover;
25    background-position: center top;
26    background-repeat: no-repeat;
27}
28.top-logo {
29    position: absolute;
30    top: 50%;
31    left: 50%;
32    width: 20%;
33    -webkit-transform: translate(-50%, -50%);
34    -moz-transform: translate(-50%, -50%);
35    transform: translate(-50%, -50%);
36    z-index: 100;
37}
38header {
39    height: 80px;
40    width: 100%;
41    background-color: #f7f7f7;
42}
43.header-flexbox {
44    display: flex;
45    justify-content: space-between;
46}
47.header-logo {
48    width: 55px;
49    margin-top: 13px;
50}
51.nav-main {
52    display: flex;
53    list-style: none;
54    margin-top: 27px;
55    font-size: 1rem;
56    text-transform: uppercase;
57}
58.nav-main li {
59    margin-left: 70px;
60    letter-spacing: 5px;
61}
62.nav-main a { 
63    color: black;
64    position: relative;
65    display: inline-block;
66}
67.nav-main a::after {
68    position: absolute;
69    bottom: -10px;
70    left: 0;
71    content: '';
72    width: 100%;
73    height: 1px;
74    background: #333;
75    transform: scale(0, 1);
76    transform-origin: right top;
77    transition: transform .3s;
78}
79.nav-main a:hover::after {
80    transform-origin: left top;
81    transform: scale(1, 1);
82}
83.message-wrapper {
84    height: 950px;
85    background-image: url(../../ダミーダミーダミー);
86    background-size: cover;
87    object-fit: cover;
88    display: flex;
89    justify-content: center;
90    padding-top: 90px;
91}
92.message-text {
93    color: black;
94    text-align: center;
95}
96.message-text h1 {
97    font-size: 26px;
98    letter-spacing: 5px;
99    font-weight: bold;
100    padding-bottom: 50px;
101}
102.message-text p {
103    font-size: 14px;
104    letter-spacing: 5px;
105    line-height: 3;
106    font-weight: normal;
107}
108ul,li {
109    margin:0;
110    padding:0;
111    list-style: none;
112}
113
114.servicearea{
115    margin-top: 20px;
116}
117
118.servicearea .category + .category {
119    margin-top: 20px;
120}
121
122.servicearea .category{
123    background: #fff;
124    padding: 16px;
125}
126
127.txt h3{
128    border-bottom: 2px solid #000;
129    line-height: 1;
130}
131
132.txt p{
133    padding-top: 8px;
134    line-height: 1;
135}
136
137.servicearea .category {
138    display: flex;
139}
140
141
142.servicearea .category .pic , .txt {
143    width: 50%;
144}
145
146ul li:nth-child(even) {
147    flex-direction: row-reverse;
148}
149
150ul li:nth-child(even) .txt {
151    padding-right: 32px;
152}
153
154ul li:nth-child(odd) .txt {
155    padding-left: 32px;
156}

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

回答1件

ベストアンサー

css
1.servicearea .category {
2    display: flex;
3}
4
5
6.servicearea .category .pic , .txt {
7    width: 50%;
8}
9
10ul li:nth-child(even) {
11    flex-direction: row-reverse;
12}
13
14ul li:nth-child(even) .txt {
15    padding-right: 32px;
16}
17
18ul li:nth-child(odd) .txt {
19    padding-left: 32px;
20}
21
22.servicearea .category {
23  display: flex;
24  align-items: center;
25}

質問コードの後半の上記の部分を下記に修正してみてください。

css
1.servicearea .category {
2  display: flex;
3  align-items: center; /* 上下中央寄せ */
4}
5
6/* 画像とテキストの幅を設定 重ねるため両者の合計は100%以上 */
7.servicearea .category .pic {
8    width: 70%; 
9}
10.txt {
11    width: 35%;
12}
13
14
15.servicearea .category .pic img {
16  width: 100%;   /* 画像の幅は親要素 .pic の幅に */
17}
18ul li:nth-child(even) {
19    flex-direction: row-reverse;
20}
21
22ul li:nth-child(even) .txt {
23  padding-right: 0;
24  margin-right: -5%; /* テキストと画像を5%重ねる */
25}
26
27ul li:nth-child(odd) .txt {
28  padding-left: 0;
29  margin-left: -5%; /* テキストと画像を5%重ねる */
30}