teratail
回答率
85.48%
質問するログイン新規登録
トップCSS3に関する質問画像の上に文字を置き、中央揃えにしたい

編集履歴

回答編集履歴

3

修正

2017/02/24 06:13

投稿

kyunta
kyunta

スコア350

test CHANGED
@@ -1,16 +1,26 @@
1
- 色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが。。。
1
+ 色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが参考に。
2
2
 
3
- 出来るだけ元のコードを残しています。
3
+ 出来るだけ元のコードを残していますが、ブラウザによって表示が崩れるので。。。
4
4
 
5
- 編集：chromeで表示が崩れるのを確認したので修正。
5
+ 編集：firefoxで表示が崩れるのを確認したので修正。
6
6
 
7
7
 
8
8
 
9
9
  ```ここに言語を入力
10
10
 
11
- .conA .container {
11
+ .conA {
12
12
 
13
- width:auto;
13
+ width:100%;
14
+
15
+ height: auto;
16
+
17
+ }
18
+
19
+ .container {
20
+
21
+ display: flex;
22
+
23
+ width: 100%;
14
24
 
15
25
  }
16
26
 
@@ -22,39 +32,59 @@
22
32
 
23
33
  flex-wrap: wrap;
24
34
 
25
- text-align: center;
35
+ width: 100%;
26
36
 
27
37
  }
28
38
 
29
- .conA ul li {
39
+ .conA ul li {
30
40
 
31
41
  display: flex;
32
42
 
33
- flex: 1 1 50%;
43
+ flex: 1 calc(100% / 2);
34
-
35
- margin: 0 auto;
36
-
37
- width: 100%;
38
44
 
39
45
  position: relative;
40
46
 
47
+
48
+
49
+ justify-content: center;
50
+
51
+ align-items: center;
52
+
53
+ margin-left: auto;
54
+
41
55
  }
42
56
 
43
- .conA p {
44
57
 
58
+
59
+ .conA li p {
60
+
45
- display: block;
61
+ display: flex;
46
62
 
47
63
  position:absolute;
48
64
 
49
- /*top:40%;
65
+ top: 0;
50
66
 
51
- left:45%;*/
67
+ left: 0;
52
68
 
69
+ right: 0;
70
+
71
+ bottom: 0;
72
+
73
+ margin: auto;
74
+
75
+ justify-content: center;
76
+
53
- text-align: center;
77
+ align-items: center;
54
78
 
55
79
  }
56
80
 
57
81
  .conA li img {
82
+
83
+ display: flex;
84
+
85
+ justify-content: center;
86
+
87
+ align-items: center;
58
88
 
59
89
  width: 100%;
60
90
 
@@ -64,7 +94,7 @@
64
94
 
65
95
  .conA .sm img {
66
96
 
67
- display: block;
97
+ display: flex;
68
98
 
69
99
  margin: auto;
70
100
 
@@ -76,24 +106,6 @@
76
106
 
77
107
 
78
108
 
79
- li {
80
-
81
- justify-content: center;
82
-
83
- align-items: center;
84
-
85
- }
86
-
87
- li p {
88
-
89
- display: block;
90
-
91
- margin: auto;
92
-
93
- }
94
-
95
-
96
-
97
109
 
98
110
 
99
111
  ```

2

修正

2017/02/24 06:12

投稿

kyunta
kyunta

スコア350

test CHANGED
@@ -90,26 +90,10 @@
90
90
 
91
91
  margin: auto;
92
92
 
93
-
94
-
95
- color: #f00;
96
-
97
- background-color: #aaf;
98
-
99
- }
100
-
101
- li {
102
-
103
- background-color: #afa;
104
-
105
- }
106
-
107
- img {
108
-
109
- border: 1px solid #f00;
110
-
111
93
  }
112
94
 
113
95
 
114
96
 
97
+
98
+
115
99
  ```

1

修正

2017/02/24 02:59

投稿

kyunta
kyunta

スコア350

test CHANGED
@@ -1,6 +1,8 @@
1
1
  色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが。。。
2
2
 
3
3
  出来るだけ元のコードを残しています。
4
+
5
+ 編集：chromeで表示が崩れるのを確認したので修正。
4
6
 
5
7
 
6
8
 
@@ -40,7 +42,7 @@
40
42
 
41
43
  .conA p {
42
44
 
43
- display: inline-block;
45
+ display: block;
44
46
 
45
47
  position:absolute;
46
48
 
@@ -64,9 +66,7 @@
64
66
 
65
67
  display: block;
66
68
 
67
- margin-left: auto;
69
+ margin: auto;
68
-
69
- margin-right: auto;
70
70
 
71
71
  width: 50%;
72
72
 
@@ -86,11 +86,27 @@
86
86
 
87
87
  li p {
88
88
 
89
- display: flex;
89
+ display: block;
90
90
 
91
- justify-content: center;
91
+ margin: auto;
92
92
 
93
+
94
+
95
+ color: #f00;
96
+
93
- align-items: center;
97
+ background-color: #aaf;
98
+
99
+ }
100
+
101
+ li {
102
+
103
+ background-color: #afa;
104
+
105
+ }
106
+
107
+ img {
108
+
109
+ border: 1px solid #f00;
94
110
 
95
111
  }
96
112