回答編集履歴

1

コード追記

2023/01/18 16:26

投稿

hatena19
hatena19

スコア33856

test CHANGED
@@ -36,3 +36,39 @@
36
36
  max-width: 100%;
37
37
  }
38
38
  ```
39
+
40
+ 追記
41
+ ---
42
+ `position: absolute;` で中央寄せする方法は既に古い手法です。今なら、`display: grid;`を使うのがシンプルに記述できるのでお勧めです。
43
+
44
+ ```css
45
+ .container {
46
+ display: grid;
47
+ grid-template-columns: 1fr 1fr;
48
+ gap: 40px;
49
+ }
50
+
51
+ .container > a {
52
+ display: grid;
53
+ place-items: center;
54
+ }
55
+
56
+ .container > a > * {
57
+ grid-column: 1;
58
+ grid-row: 1;
59
+ }
60
+
61
+ .archive-title,
62
+ .news-title {
63
+ color: white;
64
+ font-size: 0.8rem;
65
+ font-weight: bold;
66
+ background-color: rgba(0, 0, 0, 0.5);
67
+ text-align: center;
68
+ padding: 15px 20px;
69
+ }
70
+
71
+ img {
72
+ max-width: 100%;
73
+ }
74
+ ```