cssでtext-align:centerが効かない。

What I Madeをtext-align:centerにしたい。

ipadなどタブレットサイズではtext-align:centerにならない。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>My Portfolio</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9  <!-- fontawesome -->
10  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
11  <meta name="format-detection" content="telephone=no">
12  <link media="only screen and (max-device-width:480px)"
13  href="smart.css" type="text/css" rel="stylesheet" />
14  <link media="screen and (min-device-width:481px)" href="design.css"
15  type="text/css" rel="stylesheet" />
16  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
17</head>
18<body>
19  <header>
20    <div class="container">
21        <div class="header-right">
22          <a href="http://pikacho.jp" target="_blank">My Blog</a>
23          <a href="https://twitter.com" target="_blank">Twitter</a>
24          <a href="https://github.com/pikacho007" target="_blank">Github</a>
25        </div>
26      </div>
27    </header><!-- header -->
28    <div class="top-wrapper">
29      <div class="container">
30        <h1>HELLO.</h1>
31        <h1>WELCOME TO MY PORTFOLIO.</h1>
32      </div>
33    </div>
34    <!-- top-wrapper -->
35    <div class="introduction">
36      <div class="container">
37        <div class="heading">
38          <img src="img/my_face.jpg">
39          <h2>Who I am</h2>
40          <p>鹿島学園高等学校卒後、
41          <br>約１年間ヒューマンアカデミーでお世話になる。</p>
42          <h3>Love</h3>
43          <p>うさぎ、英語、ゲーム、海外ドラマ鑑賞、海外映画鑑賞、静かなカフェに行く。<br>
44          特に本屋さんの横についているカフェが好き。</p>
45        </div>
46      </div>
47    </div>
48    <!-- introduction -->
49    <div class="lesson-wrapper">
50      <div class="container">
51        <div class="heading">
52          <h2>What I Can Do</h2>
53        </div>
54        <div class="lessons">
55          <div class="lesson">
56            <div class="lessons-icon">
57              <img src="https://prog-8.com/images/html/advanced/html.png">
58              <p>HTML & CSS</p>
59            </div>
60          </div>
61          <div class="lesson">
62            <div class="lessons-icon">
63              <img src="https://prog-8.com/images/html/advanced/jQuery.png">
64              <p>JavaScript</p>
65            </div>
66          </div>
67          <div class="lesson">
68            <div class="lessons-icon">
69              <img src="https://prog-8.com/images/html/advanced/ruby.png">
70              <p>Illustrator</p>
71            </div>
72            <p class="text-contents"></p>
73          </div>
74          <div class="lesson">
75            <div class="lessons-icon">
76              <img src="https://prog-8.com/images/html/advanced/php.png">
77              <p>Photoshop</p>
78            </div>
79          </div>
80        </div><!-- lessons -->
81      </div><!-- container -->
82  </div><!-- lesson-wrapper -->
83<div class="works">
84  <h2>What I Made</h2>
85  <div class="portfolio">
86    <h3><a href="#">My Portfolio</a></h3>
87    <p>現在のサイトです。<br>
88      今までに作った作品を載せているサイトです。<br>
89      このサイトはHTML,CSS,JSを使って作成しました。</p>
90    </div><!-- portfolio -->
91  <div class="icons">
92    <h3>Logo</h3>
93    <img src="img/instagram_logo_by_myself.jpg">
94    <img src="img/pokemon_ball.png">
95    <img src="img/smartphone.png">
96    <p>Photoshop,Illustratorの操作の練習をしたくて、<br>
97      youtubeで作り方の動画を見ながら作って見ました。</p>
98            </div><!-- icons -->
99            <div class="poster">
100              <h3>佐倉市ポスター</h3>
101              <img src="img/P1010421.JPG">
102              <img src="img/ポスター書き出し.png">
103              <p>最寄駅に貼ってあった京都のポスターが綺麗だったので、<br>
104                京都の嵐山の竹林をイメージして作って見ました。<br>
105                なぜ京都をイメージして作ったかというと、<br>
106                旅行で京都に行けなかったのが悔しくて、<br>
107                旅行に行けなかった分、少しでも京都を感じたかったので作りました。
108              </p>
109            </div><!-- poster -->
110            <div class="website">
111              <h3><a href="#">komorikomasha</a></h3>
112              <a href="#"><img src="img/website.png"></a>
113              <p>本を見ながら、ヒューマンアカデミー集団クラスではじめて作ったウェブサイトです。HTML,CSS,jQueryを使って制作しました。</p>
114              <a href="https://amzn.to/2pIoctS" target="_blank">この本を使いました。amazonに飛びます。</a>
115            </div><!-- website -->
116            <div class="FiveSeconds">
117              <h3><a href="#">5秒ぴったりゲーム</a></h3>
118              <img src="img/FiveSeconds.png">
119              <p>ドットインストールのJavaScript講座を見て作りました。<br>
120                ほとんどはドットインストールのお手本を真似て作りましたが、<br>
121                デザインのアレンジは私が少し手を付け加えました。</p>
122              </div><!-- FiveSeconds -->
123              <div class="Omikuji">
124                <h3><a href="#">おみくじ</a></h3>
125                <img src="img/Omikuji.png">
126                <p>ドットインストールのJavaScript講座を見て作りました。<br>
127                元々は大吉、中吉、凶の中で中吉が多く出るようにしてあったので、<br>
128                自分でアレンジをしてたくさん凶が出るおみくじを作って見ました。<br>
129                デザインは私が少し手を付け加えました。</p>
130                </div><!-- Omikuji -->
131              </div><!-- works -->
132              <div class="contact">
133                <h2>Contact Me</h2>
134                <img src="img/mail.png">
135                <p><a href="hikaripoppo@gmail.com" target="_blank">hikaripoppo@gmail.com</p>
136                </div><!-- contact -->
137                <p id="page-top">
138                  <a href="#"><i class="fas fa-angle-up my-small"></i></a>
139                </p><!-- page-top -->
140                <footer>
141                  <div class="container">
142                    <p>Copyright 2018 Pikacho</p>
143                  </div>
144                </footer><!-- footer -->

CSS
1* {
2  box-sizing: border-box;
3}
4
5body {
6
7  width: 100%;
8  margin: 0;
9  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
10}
11
12a {
13  text-decoration: none;
14}
15
16.container {
17  width: 100%;
18  padding: 0 15px;
19  margin: 0 auto;
20}
21
22.container h1 {
23  color: white;
24}
25
26.top-wrapper {
27  padding: 180px 0 100px 0;
28  background-image: url("img/top.jpg");
29  background-size: cover;
30  color: white;
31  text-align: center;
32}
33
34.top-wrapper h1 {
35  opacity: 0.7;
36  letter-spacing: 5px;
37}
38
39.top-wrapper h1 {
40  font-size: 32px;
41}
42
43.top-wrapper p {
44  opacity: 0.7;
45}
46
47
48
49
50
51
52
53.fa {
54  margin-right: 5px;
55}
56
57header {
58  width: 100%;
59  height: 65px;
60  background-color: rgba(34, 49, 52, 0.9);
61  position :fixed;
62  top: 0;
63  z-index: 10;
64}
65
66.header-left {
67  float: left;
68}
69
70.header-right {
71  float: right;
72}
73
74.header-right a {
75  line-height: 65px;
76  padding: 0 10px;
77  color: white;
78  display: block;
79  float: left;
80  transition: all 0.5s;
81
82}
83
84.header-right a:hover {
85  background-color: rgba(255, 255, 255, 0.3);
86}
87
88.introduction {
89  text-align: center;
90  padding-top: 30px;
91}
92
93.introduction img {
94  width: 250px;
95  height: 250px;
96}
97
98.introduction h2 {
99  padding-top: 35px;
100}
101
102.introduction h3 {
103  padding-top: 35px;
104}
105
106
107
108.lesson-wrapper {
109  text-align: center;
110}
111
112
113
114.heading {
115  padding-top: 50px;
116  padding-bottom: 50px;
117
118}
119
120
121
122
123.lesson {
124  float: left;
125  width: 25%;
126}
127
128.lessons-icon {
129  position: relative;
130}
131
132.lessons-icon p {
133  position: absolute;
134  top: 45%;
135  width: 100%;
136  color: white;
137}
138
139/* PCサイズ */
140@media all and (max-width: 1000px) {
141  .container {
142    width: 100%;
143  }
144
145  .lesson {
146    width: 50%;
147    margin-bottom: 50px;
148  }
149
150  .poster {
151    width: 100%;
152  }
153}
154
155/* タブレットサイズ */
156@media all and (max-width: 750px) {
157  .container {
158    width: 100%;
159  }
160
161
162
163  .poster {
164    width: 100%;
165  }
166}
167
168/* スマホサイズ */
169@media all and (max-width: 670px) {
170    .lesson {
171      width: 100%;
172    }
173
174    .poster {
175      width: 100%;
176    }
177}
178
179
180.works {
181  width: 100%;
182  text-align: center;
183
184}
185
186
187
188.works h2 {
189  text-align: center;
190}
191
192.heading h2{
193  text-align:center;
194}
195
196
197
198
199
200
201
202.contact {
203  text-align: center;
204}
205
206.contact h2 {
207  padding-top: 100px;
208}
209
210.contact img {
211  padding-top: 30px;
212}
213
214#page-top {
215  position: fixed;
216  bottom: 20px;
217  right: 20px;
218  font-size: 80%;
219}
220
221#page-top a {
222  color: gray;
223  padding: 0 25px;
224  border-radius: 10px;
225}
226
227#page-top a:hover {
228  text-decoration: none;
229}
230
231.my-small {
232  font-size: 2.5em;
233}
234
235i.fa-angle-up {
236  padding: 1px;
237}
238
239.portfolio h3 {
240  color: black;
241  padding-top: 60px;
242}
243
244
245.icons h3 {
246  color: black;
247  padding-top: 60px;
248}
249
250.icons img {
251  width: 100px;
252  height: 100px;
253}
254
255.poster {
256  width: 100%;
257
258}
259
260.poster img {
261  width: 50%;
262  text-align: center;
263}
264
265.poster h3 {
266  padding-top: 60px;
267}
268
269
270
271.website h3 {
272  color: black;
273  padding-top: 60px;
274}
275
276.website p {
277  padding-top: 10px;
278
279}
280
281.website img {
282  width: 50%;
283  text-align: center;
284}
285
286.FiveSeconds img {
287  width: 25%;
288  text-align: center;
289}
290
291.FiveSeconds h3 {
292  padding-top: 60px;
293}
294
295.Omikuji h3 {
296  padding-top: 60px;
297}
298
299.Omikuji img {
300  width: 25%;
301}
302
303footer img {
304  width: 100%;
305}
306
307footer p {
308  color: #b3aeb5;
309  font-size: 12px;
310  text-align: center;
311  border-top: 1px solid #f7f7f7;
312  padding-top: 30px;
313}
314
315footer {
316  padding-top: 30px;
317  padding-bottom: 20px;
318}
319

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

グーグルクロム、
Atomを使用しています。

colling

2018/11/11 12:13

変更された質問内容の HTML部分を見る限りでは、stylesheet.css smart.css design.css　の3つのcssを見てみないと直面している問題がわかりません。

退会済みユーザー

2018/11/11 12:31

申し訳ないのですがスマホ,PC両方からアクセスしてみたら中央寄せされていました。しかしこれはご提示のソースが両方共通であるという過程の上です。他のソースが存在するのでしたらそちらをご提示していただかないと回答できません。

yoshinavi

2018/11/12 02:44

HTML・CSSはそれぞれコードブロックにしてください。

hikari_poppo

2018/11/12 02:53

変更しました。

hikari_poppo

2018/11/12 02:53

cssのファイルを一つにしました。

退会済みユーザー

2018/11/12 07:36

発生した不具合の画像を載せられますか？

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

回答2件

--追記--
直面されている問題がよくわかりませんが、
h2要素に対してtext-align:centerを効かせ、きっちり真ん中に寄せるには、その親要素が、ビューに対して100%の幅または、ビューのセンターに配置されていなければなりません。

今、質問のところで提示されているCSSでは、lesson-wrapperクラスがtext-align:centerになっているので、きちんとセンターに見えていますが、、。
直接指定したいということでしたら、

css
1.heading{
2  width:100%;
3}
4.heading h2{
5  text-align:center;
6}

をdesign.cssとsmart.cssの両方の最後の行に追記するか、

または</head>の直前に、

css
1<style>
2.heading{
3  width:100%;
4}
5.heading h2{
6  text-align:center;
7}
8</style>

と書いてください。

投稿2018/11/11 10:55

編集2018/11/11 12:33

colling

総合スコア798

hikari_poppo

2018/11/11 10:58

design.cssとsmart.cssの両方に入れるか、<head>の中に入れてください。がよくわかりません。

colling

2018/11/11 11:01

design.cssとsmart.cssの両方に記載してみてください。

hikari_poppo

2018/11/11 11:05

変わりません

colling

2018/11/11 11:08

今提示されているcssは design.css または smart.css のどちらでしょうか、両方提示されないことにはこちらでは、困っている内容が正確に伝わりません。

colling

2018/11/11 11:14

ちなみに、今　text-align:center　が効いていない症状が出ているのは、　スマホ、ipad、pc のうちどの端末からのアクセスの時なんでしょうか？

colling

2018/11/11 11:29 編集

わかりやすいように、回答の本文を修正しておきました。

hikari_poppo

2018/11/12 02:54

ありがとうございます

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

自己解決

.lesson に float: left; が当たっていると思いますが、そのfloatが解除できておらず、「What I Made」が回り込んでいる。

css
1.clearfix:after {
2    content:" ";
3    display:block;
4    clear:both;
5}
6

をCSSに追加して、 <div class="lessons"> -> <div class="lessons clearfix">｀のようにするとどうでしょう…
参考：
リンク内容

投稿2018/11/14 01:46

hikari_poppo

総合スコア17

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！