teratail
回答率
85.47%
質問するログイン新規登録
トップPHPに関する質問背景画像の高さを画面のサイズにした時のテキストの中央表示

編集履歴

回答編集履歴

4

中央配置の方法を追加しました。

2018/08/04 01:38

投稿

takopo
takopo

スコア484

test CHANGED
@@ -1,4 +1,4 @@
1
- こういうのはどうでしょうか。
1
+ フレックスボックスを使えば子要素を中央に配置することができます。
2
2
 
3
3
  ```css
4
4
 
@@ -23,3 +23,51 @@
23
23
  }
24
24
 
25
25
  ```
26
+
27
+ もし子要素に高さと横幅を指定できれば下のような方法もあります。
28
+
29
+ ```css
30
+
31
+ #top{
32
+
33
+ position: relative;
34
+
35
+ background-image: url(images/abc.jpg);
36
+
37
+ background-size: cover;
38
+
39
+ background-position: center center;
40
+
41
+ width: 100%;
42
+
43
+ height: 100vh;
44
+
45
+ }
46
+
47
+
48
+
49
+ #top h1 {
50
+
51
+ position: absolute;
52
+
53
+ top: 0;
54
+
55
+ bottom: 0;
56
+
57
+ left: 0;
58
+
59
+ right: 0;
60
+
61
+ width: 300px;
62
+
63
+ height: 100px;
64
+
65
+ margin: auto;
66
+
67
+ background-color: #fcc;
68
+
69
+ text-align: center;
70
+
71
+ }
72
+
73
+ ```

3

コードの修正

2018/08/04 01:38

投稿

takopo
takopo

スコア484

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  align-items: center; /* 上下中央 */
12
12
 
13
- background-image: url(../images/common/sample/sample.jpg);
13
+ background-image: url(images/abc.jpg);
14
14
 
15
15
  background-size: cover;
16
16
 

2

コードの修正

2018/08/04 01:21

投稿

takopo
takopo

スコア484

test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  width: 100%;
20
20
 
21
- height: 30vh;
21
+ height: 100vh;
22
22
 
23
23
  }
24
24
 

1

コードの変更

2018/08/04 01:20

投稿

takopo
takopo

スコア484

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  ```css
4
4
 
5
- #top h1 {
5
+ #top{
6
6
 
7
7
  display: flex;
8
8
 
@@ -10,7 +10,15 @@
10
10
 
11
11
  align-items: center; /* 上下中央 */
12
12
 
13
+ background-image: url(../images/common/sample/sample.jpg);
14
+
15
+ background-size: cover;
16
+
17
+ background-position: center center;
18
+
19
+ width: 100%;
20
+
13
- height: 100%;
21
+ height: 30vh;
14
22
 
15
23
  }
16
24