teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問CSSリセットにすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下中央に配置できない。

編集履歴

質問編集履歴

7

改行修正です。

2018/01/24 18:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -56,6 +56,8 @@
56
56
 
57
57
  ```
58
58
 
59
+ vertical-alignの問題
60
+
59
61
  CSS
60
62
 
61
63
  ```ここに言語を入力

6

修正テスト

2018/01/24 18:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,9 @@
34
34
 
35
35
  ```
36
36
 
37
+ HTML
38
+
37
- HTML```ここに言語を入力
39
+ ```ここに言語を入力
38
40
 
39
41
  <div id="yoko">
40
42
 

5

修正テスト

2018/01/24 18:33

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -60,255 +60,253 @@
60
60
 
61
61
  *{
62
62
 
63
- margin:0;
63
+ margin:0;
64
-
64
+
65
- padding:0;
65
+ padding:0;
66
66
 
67
67
  }
68
68
 
69
69
  #wapper{
70
70
 
71
- width:900px;
71
+ width:900px;
72
-
72
+
73
- margin:20px auto;
73
+ margin:20px auto;
74
74
 
75
75
  }
76
76
 
77
77
  #header{
78
78
 
79
- margin:20px auto;
79
+ margin:20px auto;
80
-
80
+
81
- padding:15px 20px;
81
+ padding:15px 20px;
82
-
82
+
83
- border:solid 1px #CCC;
83
+ border:solid 1px #CCC;
84
84
 
85
85
  }
86
86
 
87
87
  h1{
88
88
 
89
- color:green;
89
+ color:green;
90
-
90
+
91
- font-size:58px;
91
+ font-size:58px;
92
92
 
93
93
  }
94
94
 
95
95
  #contents{
96
96
 
97
- border:solid 1px #CCC;
97
+ border:solid 1px #CCC;
98
-
98
+
99
- padding:10px;
99
+ padding:10px;
100
-
100
+
101
- overflow:auto;
101
+ overflow:auto;
102
102
 
103
103
  }
104
104
 
105
105
  #left{
106
106
 
107
- float:left;
107
+ float:left;
108
-
108
+
109
- width:45%;
109
+ width:45%;
110
110
 
111
111
  }
112
112
 
113
113
  #manner{
114
114
 
115
- margin:0px 10px 20px 10px;
115
+ margin:0px 10px 20px 10px;
116
-
116
+
117
- border:double 5px blue;
117
+ border:double 5px blue;
118
-
118
+
119
- overflow:auto;
119
+ overflow:auto;
120
-
120
+
121
- padding:5px;
121
+ padding:5px;
122
122
 
123
123
  }
124
124
 
125
125
  #manner div{
126
126
 
127
- float:left;
127
+ float:left;
128
-
128
+
129
- width:70%;
129
+ width:70%;
130
130
 
131
131
  }
132
132
 
133
133
  #manner img{
134
134
 
135
- float:right;
135
+ float:right;
136
-
136
+
137
- width:25%;
137
+ width:25%;
138
-
138
+
139
- height:auto;
139
+ height:auto;
140
-
140
+
141
- margin-top:5px;
141
+ margin-top:5px;
142
142
 
143
143
  }
144
144
 
145
145
  #syacho3{
146
146
 
147
- margin:auto 10px 20px 10px;
147
+ margin:auto 10px 20px 10px;
148
-
148
+
149
- border:solid 1px blue;
149
+ border:solid 1px blue;
150
-
150
+
151
- overflow:auto;
151
+ overflow:auto;
152
-
152
+
153
- padding:5px;
153
+ padding:5px;
154
154
 
155
155
  }
156
156
 
157
157
  #syacho3 img{
158
158
 
159
- float:left;
159
+ float:left;
160
-
160
+
161
- width:25%;
161
+ width:25%;
162
-
162
+
163
- height:auto;
163
+ height:auto;
164
-
164
+
165
- margin-top:5px;
165
+ margin-top:5px;
166
166
 
167
167
  }
168
168
 
169
169
  #syacho3 div{
170
170
 
171
- float:right;
171
+ float:right;
172
-
172
+
173
- width:70%;
173
+ width:70%;
174
174
 
175
175
  }
176
176
 
177
177
  #rina3{
178
178
 
179
- margin:auto 10px 20px 10px;
179
+ margin:auto 10px 20px 10px;
180
-
180
+
181
- border:solid 1px blue;
181
+ border:solid 1px blue;
182
-
182
+
183
- overflow:auto;
183
+ overflow:auto;
184
-
184
+
185
- padding:5px;
185
+ padding:5px;
186
186
 
187
187
  }
188
188
 
189
189
  #rina3 div{
190
190
 
191
- float:left;
191
+ float:left;
192
-
192
+
193
- width:70%;
193
+ width:70%;
194
194
 
195
195
  }
196
196
 
197
197
  #rina3 img{
198
198
 
199
- float:right;
199
+ float:right;
200
-
200
+
201
- width:25%;
201
+ width:25%;
202
-
202
+
203
- height:auto;
203
+ height:auto;
204
-
204
+
205
- margin-top:5px;
205
+ margin-top:5px;
206
206
 
207
207
  }
208
208
 
209
209
  #syacho4{
210
210
 
211
- margin:auto 10px 20px 10px;
211
+ margin:auto 10px 20px 10px;
212
-
212
+
213
- border:solid 1px blue;
213
+ border:solid 1px blue;
214
-
214
+
215
- overflow:auto;
215
+ overflow:auto;
216
-
216
+
217
- padding:5px;
217
+ padding:5px;
218
218
 
219
219
  }
220
220
 
221
221
  #syacho4 img{
222
222
 
223
- float:left;
223
+ float:left;
224
-
224
+
225
- width:25%;
225
+ width:25%;
226
-
226
+
227
- height:auto;
227
+ height:auto;
228
-
228
+
229
- margin-top:5px;
229
+ margin-top:5px;
230
230
 
231
231
  }
232
232
 
233
233
  #syacho4 div{
234
234
 
235
- float:right;
235
+ float:right;
236
-
236
+
237
- width:70%;
237
+ width:70%;
238
238
 
239
239
  }
240
240
 
241
241
  #right{
242
242
 
243
- float:right;
243
+ float:right;
244
-
244
+
245
- width:45%;
245
+ width:45%;
246
246
 
247
247
  }
248
248
 
249
249
  #keigo{
250
250
 
251
- overflow:auto;
251
+ overflow:auto;
252
252
 
253
253
  }
254
254
 
255
255
  #keigo img{
256
256
 
257
- display:block;
257
+ display:block;
258
-
258
+
259
- margin:auto;
259
+ margin:auto;
260
-
260
+
261
- height:420px;
261
+ height:420px;
262
262
 
263
263
  }
264
264
 
265
265
  #sodan{
266
266
 
267
- border:solid 1px blue;
267
+ border:solid 1px blue;
268
-
268
+
269
- overflow:auto;
269
+ overflow:auto;
270
-
270
+
271
- margin:20px auto auto auto;
271
+ margin:20px auto auto auto;
272
-
272
+
273
- padding:5px;
273
+ padding:5px;
274
274
 
275
275
  }
276
276
 
277
277
  #sodan div{
278
278
 
279
- float:left;
279
+ float:left;
280
-
280
+
281
- width:70%;
281
+ width:70%;
282
282
 
283
283
  }
284
284
 
285
285
  #sodan img{
286
286
 
287
- float:right;
287
+ float:right;
288
-
288
+
289
- width:25%;
289
+ width:25%;
290
-
290
+
291
- height:auto;
291
+ height:auto;
292
-
292
+
293
- margin-top:5px;
293
+ margin-top:5px;
294
294
 
295
295
  }
296
296
 
297
297
  #footer{
298
298
 
299
- clear:both;
299
+ clear:both;
300
-
300
+
301
- display:inline;
301
+ display:inline;
302
-
302
+
303
- vertical-align:middle;
303
+ vertical-align:middle;
304
-
304
+
305
- border:solid 1px #CCC;
305
+ border:solid 1px #CCC;
306
-
306
+
307
- text-align:center;
307
+ text-align:center;
308
-
308
+
309
- margin-top:20px;
309
+ margin-top:20px;
310
-
311
-
312
310
 
313
311
  }
314
312
 

4

記憶をたよりに書いてみました。

2018/01/24 18:27

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -54,4 +54,412 @@
54
54
 
55
55
  ```
56
56
 
57
+ CSS
58
+
57
- よろしくお願いします。
59
+ ```ここに言語を入力
60
+
61
+ *{
62
+
63
+ margin:0;
64
+
65
+ padding:0;
66
+
67
+ }
68
+
69
+ #wapper{
70
+
71
+ width:900px;
72
+
73
+ margin:20px auto;
74
+
75
+ }
76
+
77
+ #header{
78
+
79
+ margin:20px auto;
80
+
81
+ padding:15px 20px;
82
+
83
+ border:solid 1px #CCC;
84
+
85
+ }
86
+
87
+ h1{
88
+
89
+ color:green;
90
+
91
+ font-size:58px;
92
+
93
+ }
94
+
95
+ #contents{
96
+
97
+ border:solid 1px #CCC;
98
+
99
+ padding:10px;
100
+
101
+ overflow:auto;
102
+
103
+ }
104
+
105
+ #left{
106
+
107
+ float:left;
108
+
109
+ width:45%;
110
+
111
+ }
112
+
113
+ #manner{
114
+
115
+ margin:0px 10px 20px 10px;
116
+
117
+ border:double 5px blue;
118
+
119
+ overflow:auto;
120
+
121
+ padding:5px;
122
+
123
+ }
124
+
125
+ #manner div{
126
+
127
+ float:left;
128
+
129
+ width:70%;
130
+
131
+ }
132
+
133
+ #manner img{
134
+
135
+ float:right;
136
+
137
+ width:25%;
138
+
139
+ height:auto;
140
+
141
+ margin-top:5px;
142
+
143
+ }
144
+
145
+ #syacho3{
146
+
147
+ margin:auto 10px 20px 10px;
148
+
149
+ border:solid 1px blue;
150
+
151
+ overflow:auto;
152
+
153
+ padding:5px;
154
+
155
+ }
156
+
157
+ #syacho3 img{
158
+
159
+ float:left;
160
+
161
+ width:25%;
162
+
163
+ height:auto;
164
+
165
+ margin-top:5px;
166
+
167
+ }
168
+
169
+ #syacho3 div{
170
+
171
+ float:right;
172
+
173
+ width:70%;
174
+
175
+ }
176
+
177
+ #rina3{
178
+
179
+ margin:auto 10px 20px 10px;
180
+
181
+ border:solid 1px blue;
182
+
183
+ overflow:auto;
184
+
185
+ padding:5px;
186
+
187
+ }
188
+
189
+ #rina3 div{
190
+
191
+ float:left;
192
+
193
+ width:70%;
194
+
195
+ }
196
+
197
+ #rina3 img{
198
+
199
+ float:right;
200
+
201
+ width:25%;
202
+
203
+ height:auto;
204
+
205
+ margin-top:5px;
206
+
207
+ }
208
+
209
+ #syacho4{
210
+
211
+ margin:auto 10px 20px 10px;
212
+
213
+ border:solid 1px blue;
214
+
215
+ overflow:auto;
216
+
217
+ padding:5px;
218
+
219
+ }
220
+
221
+ #syacho4 img{
222
+
223
+ float:left;
224
+
225
+ width:25%;
226
+
227
+ height:auto;
228
+
229
+ margin-top:5px;
230
+
231
+ }
232
+
233
+ #syacho4 div{
234
+
235
+ float:right;
236
+
237
+ width:70%;
238
+
239
+ }
240
+
241
+ #right{
242
+
243
+ float:right;
244
+
245
+ width:45%;
246
+
247
+ }
248
+
249
+ #keigo{
250
+
251
+ overflow:auto;
252
+
253
+ }
254
+
255
+ #keigo img{
256
+
257
+ display:block;
258
+
259
+ margin:auto;
260
+
261
+ height:420px;
262
+
263
+ }
264
+
265
+ #sodan{
266
+
267
+ border:solid 1px blue;
268
+
269
+ overflow:auto;
270
+
271
+ margin:20px auto auto auto;
272
+
273
+ padding:5px;
274
+
275
+ }
276
+
277
+ #sodan div{
278
+
279
+ float:left;
280
+
281
+ width:70%;
282
+
283
+ }
284
+
285
+ #sodan img{
286
+
287
+ float:right;
288
+
289
+ width:25%;
290
+
291
+ height:auto;
292
+
293
+ margin-top:5px;
294
+
295
+ }
296
+
297
+ #footer{
298
+
299
+ clear:both;
300
+
301
+ display:inline;
302
+
303
+ vertical-align:middle;
304
+
305
+ border:solid 1px #CCC;
306
+
307
+ text-align:center;
308
+
309
+ margin-top:20px;
310
+
311
+
312
+
313
+ }
314
+
315
+ ```
316
+
317
+ HTML
318
+
319
+ ```ここに言語を入力
320
+
321
+ <!DOCTYPE html>
322
+
323
+ <html>
324
+
325
+ <head>
326
+
327
+ <title>無題ドキュメント</title>
328
+
329
+ <link rel="stylesheet" type="text/css" href="style1.css">
330
+
331
+ </head>
332
+
333
+ <body>
334
+
335
+ <div id="wapper">
336
+
337
+ <div id="header">
338
+
339
+ <h1>test</h1>
340
+
341
+ <p>testは、～です。</p>
342
+
343
+ </div>
344
+
345
+ <!--header_end-->
346
+
347
+ <div id="contents">
348
+
349
+ <div id="left">
350
+
351
+ <div id="manner">
352
+
353
+ <div>
354
+
355
+ <p>
356
+
357
+ あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまや
358
+
359
+ わあかさたなはまやらわ
360
+
361
+ </p>
362
+
363
+ </div>
364
+
365
+ <img src="images/lake1web.jpg" alt="見本" />
366
+
367
+ </div>
368
+
369
+ <!--manner_end-->
370
+
371
+ <div id="syacho3">
372
+
373
+ <img src="images/lake1web.jpg" alt="見本" />
374
+
375
+ <div>
376
+
377
+ あかさたなはまやらわ
378
+
379
+ </div>
380
+
381
+ </div>
382
+
383
+ <!--syacho3_end-->
384
+
385
+ <div id="rina3">
386
+
387
+ <div>
388
+
389
+ あかさたなはまやらわ
390
+
391
+ </div>
392
+
393
+ <img src="images/lake1web.jpg" alt="見本" />
394
+
395
+ </div>
396
+
397
+ <!--rina3_end-->
398
+
399
+ <div id="syacho4">
400
+
401
+ <img src="images/lake1web.jpg" alt="見本" />
402
+
403
+ <div>
404
+
405
+ あかさたなはまやらわ
406
+
407
+ </div>
408
+
409
+ </div>
410
+
411
+ <!--syacho4_end-->
412
+
413
+ </div>
414
+
415
+ <!--left_end-->
416
+
417
+ <div="right">
418
+
419
+ <div id="keigo">
420
+
421
+ <img src="images/lake1web.jpg" alt="見本" />
422
+
423
+ </div>
424
+
425
+ <!--keigo_end-->
426
+
427
+ <div id="sodan">
428
+
429
+ <div>
430
+
431
+ あかさたなはまやらわ
432
+
433
+ </div>
434
+
435
+ <img src="images/lake1web.jpg" alt="見本" />
436
+
437
+ </div>
438
+
439
+ <!--sodan-->
440
+
441
+ </div>
442
+
443
+ <!--right_end-->
444
+
445
+ <div id="footer">
446
+
447
+ 株式会社トラスト
448
+
449
+ </div>
450
+
451
+ <!--footer_end-->
452
+
453
+ </div>
454
+
455
+ <!--contents_end-->
456
+
457
+ </div>
458
+
459
+ <!--wapper_end-->
460
+
461
+ </body>
462
+
463
+ </html>
464
+
465
+ ```

3

誤字修正しました。

2018/01/24 18:15

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,15 +1,3 @@
1
- ```ここに言語を入力
2
-
3
- *{
4
-
5
- margin:0;
6
-
7
- padding:0;
8
-
9
- }
10
-
11
- ```
12
-
13
1
  でCSSリセットをすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下左右中央に配置できません。
14
2
 
15
3
 
@@ -40,7 +28,7 @@
40
28
 
41
29
  border:solid 1px #CCC;
42
30
 
43
- padding:20px 10px 20px: auto;
31
+ padding:20px 10px 20px auto;
44
32
 
45
33
  }
46
34
 

2

詳しいコードを記入しました。

2018/01/24 17:34

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -18,6 +18,52 @@
18
18
 
19
19
  これは仕様でしょうか？
20
20
 
21
+ 以下はコードです。
21
22
 
23
+ CSS
24
+
25
+ ```ここに言語を入力
26
+
27
+ *{
28
+
29
+ margin:0;
30
+
31
+ padding:0;
32
+
33
+ }
34
+
35
+ #yoko{
36
+
37
+ display:-webkit-flex;
38
+
39
+ display:flex;
40
+
41
+ border:solid 1px #CCC;
42
+
43
+ padding:20px 10px 20px: auto;
44
+
45
+ }
46
+
47
+ ```
48
+
49
+ HTML```ここに言語を入力
50
+
51
+ <div id="yoko">
52
+
53
+ <div>
54
+
55
+ testtesttest
56
+
57
+ </div>
58
+
59
+ <div>
60
+
61
+ <img src="images/hoge.jpg" alt="test" />
62
+
63
+ </div>
64
+
65
+ </div>
66
+
67
+ ```
22
68
 
23
69
  よろしくお願いします。

1

誤字を訂正しました。

2018/01/24 16:01

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- CSSリセットにすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下左右中央に配置できない。
1
+ CSSリセットにすると、display:inlineでもvertical-align:middleにしてdiv要素内の文字を上下中央に配置できない。
test CHANGED
File without changes