　➡　　

前提

HTML/CSSを学習中です。
現在、実践演習を行っています。↑左イメージのPC向け表示のLPを、↑右イメージのスマホ向け表示への対応を目指してコーディング中です。
#実現したいこと
スマホ向け表示に対応させたいです。上に画像、下にテキストx3を配置しつつ、その3つの要素を上から下に並ぶよう中央配置にしたいです。
↓イメージのコース一覧(赤枠)部分の様な配置を目指しています。
######本来指定したい状態
スマホ向け表示時

しかし現在、コース一覧部分は↓イメージの様な配置になってしまいます。
######現在の誤りのある状態
スマホ向け表示時

スマホ向け表示対応のため上に画像、下にテキストx3を配置しつつ、その3つの要素を上から下に並ぶよう中央配置にする方法を教えて頂けると助かります。よろしくお願いします。

試したこと

Responsive.cssにて@media (max-width: 670px)を設定し、その中のservicesクラス
に

text-align: center;
margin: 0 auto;
display: inline-block;

上記を試しましたが解決しませんでした。

※2020/12/11　16:33追記
回答者の提案から
serviceクラスのinline-blockと、:first-childのブロックを削除してみましたがこちらも解決には至りませんでした。その時のレイアウトの状態は下記の通りです。
・通常(PC)表示のコース一覧のレイアウトがくずれる。
・スマホ表示のコース一覧は要素x3が上から下に配置されるが3要素全て右寄せの配置になる

serviceクラスのinline-blockと、:first-childのブロックを削除した状態↓
↓PC向け表示時

↓スマホ向け表示時

補足情報（FW/ツールのバージョンなど）

使用機器：Dynabook 15インチ
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>デイトラ/copy</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  <link rel="stylesheet" href="responsive.css">
9</head>
10<body>
11  <header>
12    <div class="container">
13      <div class="header-left">
14        <h2>30DAYSトライアル</h2>
15      </div>
16      <div class="header-right">
17        <a href="#">デイトラとは</a>
18        <a href="#">コース一覧</a>
19        <a href="#">お問い合わせ</a>
20      </div>
21    </div>
22  </header>
23  <div class="main">
24    <div class="container">
25      <h1>1日1題30日で<br>プロのWebエンジニアになろう！</h1>
26      <p>毎日指定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身に付きます</p>
27    </div>
28  </div>
29  <div class="about-wrap">
30    <div class="container">
31      <div class="heading">
32        <h1>デイトラとは</h1>
33      </div>
34      <div class="about">
35        <div class="box">
36          <img src="img/about.png" >
37          <div class="right">
38            <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！
39            </p>
40          </div>
41        </div>
42      </div>
43    </div>
44  </div>
45  <div class="service-wrap">
46    <div class="container">
47      <div class="heading">
48        <h1>コース一覧</h1>
49      </div>
50      <div class="services">
51        <div class="service">
52          <div class="service-icon">
53            <img src="img/web_first.png">
54          </div>
55          <p>HTML / CSS / Bootstrap</p>
56        </div>
57        <div class="service">
58          <div class="service-icon">
59            <img src="img/web_second.png">
60          </div>
61          <p>HTML / CSS / JavaScript / jQuery</p>
62        </div>
63        <div class="service">
64          <div class="service-icon">
65            <img src="img/web_third.png">
66          </div>
67          <p>PHP / WordPress</p>
68        </div>
69      </div>
70    </div>
71  </div>
72  <div class="contact-wrap">
73    <div class="container">
74      <div class="heading">
75        <h1>お問い合わせ</h1>
76        <p>さあ今日から30日間を始めよう！</p>
77        <input type="text" placeholder="メールアドレス">
78    </div>
79    <div class="contact-submit"><input type="submit" value="無料ではじめる" class="button"></div>
80    </div>
81  </div>
82  <footer>
83    <div class="container">
84      <hr width="80%" noshad>
85      <p>Copyright(C) 2020 東京フリーランス ALL Rights Reserved.</p>
86    </div>
87  </footer>
88</body>
89</html>

css
1* {
2  color: rgb(1, 1, 56);
3  text-decoration: none;
4  box-sizing: border-box;
5  font-family: "Helvetica Neue",
6    Arial,
7    "Hiragino Kaku Gothic ProN",
8    "Hiragino Sans",
9    Meiryo,
10    sans-serif;
11    font-weight: bold;
12}
13
14div {
15  display: block;
16}
17header {
18  height: 80px;
19  width: 100%;
20  background-color: white; 
21  /* position: fixed; */
22  top: 0;
23  z-index: 10;
24}
25.header-left {
26  float: left;
27  margin-left: 200px;
28}
29.header-right {
30  float: right;
31  margin-right: 200px;
32}
33.header-right a {
34  line-height: 65px;
35  padding: 0 25px;
36  /* color: white; */
37  display: block;
38  float: left;
39  transition: all 0.5s;
40}
41
42.main h1 {
43  /* opacity: 0.7; */
44  font-size: 45px;
45  /* letter-spacing: 5px; */
46}
47h1 {
48  display: block;
49  font-size: 2em;
50  margin-block-start: 0.67em;
51  margin-block-end: 0.67em;
52  margin-inline-start: 0px;
53  margin-inline-end: 0px;
54  font-weight: bold;
55}
56.main {
57  padding: 180px 0 100px 0;
58  background-image: url(img/main-vsual-nontitle.png);
59  /* color: white; */
60  background-size: cover;
61  text-align: center;
62}
63.about-section {
64  float: left;
65}
66.heading {
67  padding-top: 30px;
68  padding-bottom: 30px;
69  text-align: center;
70}
71
72.about {
73  text-align: center
74}
75.box {
76  margin: 10px 0;
77  float: left;
78  width: 100%;
79  display: flex;
80  justify-content: center;
81}
82
83.box img {
84  max-width: 35%;
85}
86
87.box p {
88  margin-left: 40px; 
89}
90
91.service-wrap {
92  margin-top: 400px;
93  text-align: center;
94}
95
96.services {
97  display: inline-block; 
98}
99
100.service {
101  display: inline-block;
102  text-align: left;
103  margin-left: 100px;
104}
105
106.service:first-child {
107  margin-left: 0;
108}
109
110.service-icon img {
111  width: 300px;
112}
113
114.service p {
115  margin: 0 0;
116}
117
118.heading p {
119  margin: 30px 0 0 0;
120}
121
122.heading input {
123	width: 40%;
124}
125
126.heading input[type=text] {
127	font: 15px/24px sans-serif;
128	box-sizing: border-box;
129	padding: 1em;
130	border: 2px solid #999;
131	border-radius: 40px;
132}
133
134.contact-submit {
135  text-align: center;
136}
137
138.button {
139  display       : inline-block;
140  border-radius : 3%;          /* 角丸       */
141  font-size     : 18pt;        /* 文字サイズ */
142  text-align    : center;      /* 文字位置   */
143  cursor        : pointer;     /* カーソル   */
144  padding       : 12px 100px;   /* 余白       */
145  background    : #ff7575;     /* 背景色     */
146  color         : #ffffff;     /* 文字色     */
147  line-height   : 1em;         /* 1行の高さ  */
148  transition    : .3s;         /* なめらか変化 */
149  border        : 2px solid #ff7575;    /* 枠の指定 */
150  height: 80px;
151}
152
153footer {
154  margin: 100px 0 100px 0;
155}
156
157footer p {
158  margin-left: 63%;
159  margin-top: 20px;
160  font-size: small;
161  font-weight: normal;
162  color: black;
163}

responsive
1@media (max-width: 670px) {
2  .services {
3  width: 100%;
4  text-align: center;
5 }
6
7footer {
8  text-align: center;
9 }
10}

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

回答3件

通常(PC)表示のコース一覧のレイアウトがくずれる @snow rider 3d

投稿2023/05/22 06:58

kasrty

総合スコア2

responsive.cssにて
serviceクラスをmargin-left: 0;にしたところスマホ向け表示で中央配置になりました。

変更前

responsinve
1@media (max-width: 670px) {
2  .services {
3  width: 100%;
4  text-align: center;
5 }
6
7footer {
8  text-align: center;
9 }
10}

変更後

responsinve
1@media (max-width: 670px) {
2.service {
3  margin-left: 0;
4}
5
6footer {
7  text-align: center;
8}
9
10}

投稿2020/12/12 05:16

_505turkish

総合スコア6

期待通りの表示かはわかりませんが、
serviceクラスのinline-blockと、:first-childのブロックを削除してみてください。

変更前

css
1.service {
2  display: inline-block;
3  text-align: left;
4  margin-left: 100px;
5}
6
7.service:first-child {
8  margin-left: 0;
9}

変更後

css
1.service {
2  text-align: left;
3  margin-left: 100px;
4}

投稿2020/12/11 05:21

plasticgrammer

総合スコア629

_505turkish

2020/12/11 05:43 編集

回答ありがとうございます。解決はしませんでした。 serviceクラスのinline-blockと、:first-childのブロックを削除すると下記の状態になります。・通常(PC)表示のコース一覧のレイアウトがくずれる。・スマホ表示のコース一覧は要素x3が上から下に配置されるが3要素全て右寄せの配置になる。

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

あなたの回答