bootstrap リストのリンクをボタンみたいにしたい

2カラムのレイアウトを作成しています。
サイドバーのメニューのリンクを、リンク文字だけではなく、ブロックにしたいのですができません…
アドバイスいただけますと幸いです。

###やりたいこと

↑サイドメニューのリンクにカーソルを当てた時のキャプチャです。

①本当は、リンクにカーソルを当てた時に、li全体の背景色が変わるようにしたいです。
（.side-nav ul li a　にdisplay: block;を設定しましたが、カーソルを当てると狭い範囲しか背景色が変わりません・・・

②サイドメニューのリンクの文字を、liの中央に配置したいです。
中央に配置しようと、liにd-flex align-items-centerを設定しました。望み通りの中央になりましたが、カーソルを当てた時にさらに背景色が狭くなってしまいました。

以下、現在のコードです。

html

<body>
    <div class="container-fluid">
    <div class="row">
        <div class="col-2 px-0 bg-dark position-fixed" id="sticky-sidebar">
            <div class="side-title d-flex align-items-center pl-2">
                ヤドリギKey System
            </div>
            <div class="side-nav">
                <nav>
                    <ul class="navbar-nav side-menu">
                        <li class="d-flex align-items-center">
                            <a href="">ユーザー</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav side-menu">
                        <li>
                            <a href="">Unlock履歴</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav  side-menu">
                        <li>
                            <a href="">アカウント</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav border-top logout">
                        <li>
                            <a href="">ログアウト</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="col offset-2" id="main">
            <h1>Main Area</h1>
            
            ...
            <table class="table table-striped table-sm">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Header</th>
                                    <th>Header</th>
                                    <th>Header</th>
                                    <th>Header</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1,001</td>
                                    <td>Lorem</td>
                                    <td>ipsum</td>
                                    <td>dolor</td>
                                    <td>sit</td>
                                </tr>

css

html {
  height: 100%;
  font-size: 14px;
 
}

body {
  height: 100%;
  margin: 0;
  font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  
}

a {
    color: #33B1A9;
}

a:hover {
    color: #33B1A9;
    text-decoration: none;
}

.container-fluid {
  height: 100%;
  background: #ffffff;
}

#sticky-sidebar {
  position: fixed;
  height: 100%;
}

.side-title {
  background: #33B1A9;
  height: 70px;
  color: #ffffff;
}

.side-nav ul li a {
  color: #F4F4F4;
  display: block;
}

.navbar-nav li a:hover {
  background-color: #ffffff;
}

.navbar-nav li {
  height: 50px;
  
  
}

カーソルを当てた時に、ul全体の背景色が変わるようにしたいです。よろしくお願いいたします。

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

回答1件

ベストアンサー

css
1.side-nav ul li {
2  display: table;
3}
4.side-nav ul li a {
5  display: table-cell;
6  vertical-align: middle;
7  height:　100%;
8}

liにheightを指定せずとも上下余白を付ければ一応上下中央に見えなくもないけど

投稿2020/06/21 14:57

編集2020/06/22 04:25

yuki84web

総合スコア1857

mikeko0901

2020/06/22 03:18

アドバイスありがとうございます。また、説明不足で申し訳ございません。左右中央ではなく、左寄せのままで上下中央にしたいのですが、text-align:centerのほかに、良い方法はありますでしょうか？また、dispray: block;が効かず・・・ホバーの際に背景変更がliの全体に広がるようにする方法もアドバイスいただけますと幸いです。