<span>を使わず<a>だけで縦位置中央にしたい

前提・実現したいこと

css初心者です。

CSSでページネイションを実装したく、ここを参考にしました。

<a>タグ内に<span>があり、この<span>で縦位置中央にしてるのですが、
<a>タグ内に何もはさまず、このレイアウトを実装出来ないでしょうか？

ある事情により、出来れば<a>タグ内に何も挟みたくないのです。
※railsのwill_paginate()によりtag生成するため

該当のソースコード

HTML

html
1<div class="pager" role="navigation">
2	<ul class="pagination">
3		<li class="prev previous_page "><a rel="prev" href=""><span>«</span></a></li>
4		<li><a href=""><span>1</span></a></li>
5		<li><a href=""><span>2</span></a></li>
6		<li><a rel="prev" href=""><span>3</span></a></li>
7		<li class="active"><a href=""><span>4</span></a></li>
8		<li><a rel="next" href=""><span>5</span></a></li>
9		<li class="next next_page "><a rel="next" href=""><span>»</span></a></li>
10	</ul>
11</div>
12

元々のCSS

css
1
2.pager .pagination {
3    text-align: center;
4}
5
6.pager .pagination li {
7    display: inline;
8    margin: 0 2px;
9    padding: 0;
10    display: inline-block;
11    background: #9D50BB;
12    width: 40px;
13    height: 40px;
14    text-align: center;
15    position: relative;
16    border-radius: 50px;
17}
18
19.pager .pagination li a{
20    vertical-align: middle;
21    position: absolute;
22    top: 0;
23    left: 0;
24    width: 100%;
25    height: 100%;
26    text-align: center;
27    display:table;
28    color: #fff;
29    text-decoration: none;
30    -webkit-transition: all 0.3s ease;
31    -moz-transition: all 0.3s ease;
32    -o-transition: all 0.3s ease;
33    transition: all  0.3s ease;
34}
35
36.pager .pagination li a span{
37    display:table-cell;
38    vertical-align:middle;
39}
40
41.pager .pagination li a:hover,
42.pager .pagination li a.active{
43    color: #000;
44    background: #ccf;
45    border-radius: 50px;
46}
47
48
49@media only screen and (max-width: 767px){
50    .pager .pagination li{
51        display: none;
52    }
53
54    .pager .pagination li.prev,
55    .pager .pagination li.next{
56        display: inline-block;
57        width: 40%;
58        height: 50px;
59        text-align: center;
60    }
61
62    .pager .pagination li.prev a,
63    .pager .pagination li.next a{
64        width: 100%;
65        text-align: center;
66    }
67    
68    .pager .pagination li.prev span::after{
69        content: "　前の10件へ";
70    }
71    
72    .pager .pagination li.next span::before{
73        content: "次の10件へ　";
74    }
75
76}
77

コードペン

コードペンにも置きました
コードペン

試したこと

・spanを消す
→当然、縦位置中央が無効になってしまいました。

・a要素（インライン要素）をブロック要素にしてliの中のa要素（ブロック要素）を縦位置中央揃え
リンク内容
こちらを試しましたが、変わりありませんでした。

どう修正すべきでしょうか？
flexなどに変えたが良いでしょうか？

先輩方アドバイスお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

今なら FlexBox を使うのかお勧めです。

css
1.pager .pagination li a{
2 /*   vertical-align: middle;
3    position: absolute;
4    top: 0;
5    left: 0; 不要 */
6    width: 100%;
7    height: 100%;
8/*    text-align: center; 不要 */
9    display: flex;            /* 修正 */
10    justify-content: center;  /* 追加 水平位置中央寄せ */
11    align-items: center;      /* 追加 垂直位置中央寄せ */
12    color: #fff;
13    text-decoration: none;
14    -webkit-transition: all 0.3s ease;
15    -moz-transition: all 0.3s ease;
16    -o-transition: all 0.3s ease;
17    transition: all  0.3s ease;
18}