お世話になります。BOOTSTRAPの中央揃えができません。全ての項目セルについて上下中央揃えをさせたいです。
#ためしたこと
ためしたCSSとHTMLを添付します。
h1{ font-size:40px; } .td_vertical_align_middle { vertical-align: middle; }
html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="here.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container"> <h1>h1の内容</h1> <table border="1" class="dataframe table table-bordered table-hover"> <!--変更 !--> <thead> <tr style="text-align: right;"> <th></th> <th>aaa</th> <th>bbb</th> <th>ccc</th> <th>ddd</th> <th>eee</th> <th>fff</th> <th>ggg</th> </tr> </thead> <tbody> <tr> <th>0</th> <td class="td_vertical_align_middle">aaa</td> <td class="td_vertical_align_middle">bbb</td> <td class="td_vertical_align_middle">ccc</td> <td class="td_vertical_align_middle">ddd</td> <td class="td_vertical_align_middle">eee</td> <td class="td_vertical_align_middle">fff</td> <td class="td_vertical_align_middle">ggg</td> </tr> <tr> <th>1</th> <td class="td_vertical_align_middle">1</td> <td class="td_vertical_align_middle">2</td> <td class="td_vertical_align_middle">3</td> <td class="td_vertical_align_middle">4</td> <td class="td_vertical_align_middle">5</td> <td class="td_vertical_align_middle">6</td> <td class="td_vertical_align_middle">7</td> </tr> <tr> <th>2</th> <td class="td_vertical_align_middle">8</td> <td class="td_vertical_align_middle">9</td> <td class="td_vertical_align_middle">10</td> <td class="td_vertical_align_middle">11</td> <td class="td_vertical_align_middle">12</td> <td class="td_vertical_align_middle">13</td> <td class="td_vertical_align_middle">14</td> </tr> </tbody> </table> </div> </body> </html>
宜しくお願いします
回答1件
あなたの回答
tips
プレビュー