HTML CSS SP時２段目の要素だけ真ん中に寄せたい

実現したいこと

画面幅800px以下の時に、添付画像のように２段目の要素だけを真ん中に配置したいのですが、
方法が分かりません。

イメージ説明

HTML
1<nav class="page-nav-wrap content-wrap">
2  <ul class="page-nav">
3    <li>
4      <a href="#">
5        <span class="page-nav__text">
6          テキスト<br>
7          テキスト<br>
8          テキスト<br>
9        </span>
10      </a>
11    </li>
12    <li>
13      <a href="#">
14        <span class="page-nav__text">
15          テキスト <br>
16          テキスト<br>
17          テキスト <br>
18          テキスト<br>
19        </span>
20      </a>
21    </li>
22    <li>
23      <a href="#">
24        <span class="page-nav__text">
25          テキスト <br>
26          テキスト
27        </span>
28      </a>
29    </li>
30  </ul>
31</nav>

css

css
1.page-nav-wrap {
2  margin-top: -21em;
3}
4
5@media screen and (max-width: 800px) {
6  .page-nav-wrap {
7    background-color: black;
8    margin-top: 0;
9    padding-top: 2em;
10    padding-bottom: 2.5em;
11  }
12}
13
14.page-nav {
15  color: #fff;
16  display: -ms-grid;
17  display: grid;
18  -ms-grid-columns: (24.41406%)[auto-fit];
19  grid-template-columns: repeat(auto-fit, 24.41406%);
20  -webkit-column-gap: 0.78125%;
21  column-gap: 0.78125%;
22  row-gap: 1rem;
23  -webkit-justify-content: center;
24  -ms-flex-pack: center;
25  justify-content: center;
26}
27
28@media screen and (max-width: 800px) {
29  .page-nav {
30    -ms-grid-columns: (48.4507%)[2];
31    grid-template-columns: repeat(2, 48.4507%);
32    -ms-grid-rows: 93px 93px;
33    grid-template-rows: 93px 93px;
34    -webkit-column-gap: 3.09859%;
35    column-gap: 3.09859%;
36    row-gap: 1.5rem;
37  }
38}
39
40.page-nav a {
41  display: -ms-grid;
42  display: grid;
43  place-items: center;
44  -webkit-flex-direction: column;
45  -ms-flex-direction: column;
46  flex-direction: column;
47  height: 100%;
48  position: relative;
49  color: #fff;
50  border-radius: 10px;
51  background-color: #003384;
52  box-shadow: 0 5px 0 black;
53  padding-left: 1em;
54  padding-right: 1em;
55  padding-bottom: 3.45em;
56  padding-top: 0.85em;
57}
58
59@media screen and (max-width: 670px) {
60  .page-nav a {
61    border-radius: 5px;
62  }
63}
64
65.page-nav a:hover {
66  box-shadow: 0 0px 0 black;
67  -webkit-transform: translateY(5px);
68  -ms-transform: translateY(5px);
69  transform: translateY(5px);
70}
71
72.page-nav a::before {
73  content: '';
74  background-image: url(../img/icon_arrow-bottom.svg);
75  background-repeat: no-repeat;
76  background-position: center center;
77  background-size: contain;
78  width: 2.6rem;
79  height: 2.6rem;
80  position: absolute;
81  bottom: 5px;
82}
83
84@media screen and (max-width: 800px) {
85  .page-nav a::before {
86    width: 1.8rem;
87    height: 1.8rem;
88  }
89}
90
91@media screen and (max-width: 670px) {
92  .page-nav a {
93    border-radius: 5px;
94  }
95}
96
97.page-nav a:visited {
98  color: inherit;
99}
100
101.page-nav__text {
102  display: block;
103  line-height: 1.33;
104  /* font-weight: 700; */
105  font-size: 1.8rem;
106  text-align: center;
107}
108
109@media screen and (max-width: 800px) {
110  .page-nav__text {
111    line-height: 1.3;
112    font-size: 1.4rem;
113  }
114}

上記コードで現状以下のように表示されています。
イメージ説明

2段目の要素（3番目の）だけを真ん中に配置するにはどのようにすればよいでしょうか？

回答1件

ベストアンサー

そのようなレイアウトなら、Grigレイアウトより、Flexboxレイアウトの方が向いていると思います。

css
1.page-nav {
2  color: #fff;
3  display: flex;
4  column-gap: 0.78125%;
5  row-gap: 1rem;
6  justify-content: center;
7}
8.page-nav > li {
9  width: 24.41406%;
10}
11@media screen and (max-width: 800px) {
12  .page-nav {
13    flex-wrap: wrap;
14    align-items: stretch;
15    column-gap: 3.09859%;
16    row-gap: 1.5rem;
17  }
18  .page-nav > li {
19    width: 48.4507%;
20  }
21}