Q&A
実現したいこと
タイトルのとおりです。
発生している問題・分からないこと
下記のソースを実行するとこのようになります。
→「＞」ができるだけ右寄せしている・・・NG
→「＞」が上下中央に位置している・・・・OK
下記のソースを★の「d-flex」消すと、このようになります。
→「＞」ができるだけ右寄せしている・・・OK
→「＞」が上下中央に位置している・・・・NG
このとき、「＞」のアイコンをできるだけ右寄せさせたうえで上下中央に位置させるにはどうしたらいいでしょうか？
→「＞」ができるだけ右寄せしている・・・OK
→「＞」が上下中央に位置している・・・・OK という形にしたいです。
該当のソースコード
PHP
1 @foreach([1,1,1,1,1,1,1,1] as $item) 2 <div class="border-top p-3" style="cursor: pointer;"> 3 <div class="container pl-0 pr-0"> 4 <div class="row"> 5 <div class="col-11 card-body p-1"> 6 <table class="table table-borderless mb-0"> 7 <tr> 8 <td rowspan="3" class="pl-0 pt-0 pb-0"> 9 ｘｘｘ 10 </td> 11 <td colspan="2" class="pl-0 pt-0 pb-0"> 12 <span class="h6"> 13 文字列文字列文字列文字列文字列<br> 14 文字列文字列文字列<br> 15 文字列文字列文字列 16 </span> 17 </td> 18 </tr> 19 </table> 20 </div> 21 <div class="col-1 card-body p-1 text-right d-flex align-items-center"><!-- ★ --> 22 <i class="fa-solid fa-chevron-right"></i> 23 </div> 24 </div> 25 </div> 26 </div> 27 @endforeach
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
上下中央に位置させるのは、下記を見て調べました。
https://jsstudy.hatenablog.com/entry/How-to-center-the-character-of-navi-in-%E2%80%8B%E2%80%8Bthe-vertical-direction-with-Bootstrap
https://qiita.com/76r6qo698/items/c124e3fcef1c1ea4aaf9
補足
特になし
回答1件
0
ベストアンサー
justify-content-endクラスを追加すればどうでしょう。
Justify content /フレックス · Bootstrap v5.3
html
1 <div class="col-1 card-body p-1 text-right d-flex align-items-center justify-content-end"> 2 <!-- ★ --> 3 <i class="fa-solid fa-chevron-right"></i> 4 </div>
投稿2025/04/12 06:00
総合スコア34328
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2025/04/12 07:21