bootstrap4の上下左右がどうしても効かないので助けて下さい

bootstrap4のカードの水平スタイルをつかってviewを作成しています。

タイトル
左側にリスト
右側に画像

を配置しておりまして、右側の画像を上下中央にしたいのですが、
なぜか、上下中央が効きません。
htmlは以下のようなイメージで記載しています。

高さはリストが増えると高くなるのですが、右側エリアは高さを捉えていないのかもしれません。。
初心者ですいません。教えて頂けますと幸いです。

html
1<div class="card mb-3">
2  <h3 class="card-title card-header"><%= event.title %></h3>
3    <div class="row no-gutters">
4      <div class="col-sm-7 border-right">
5        <ul class="list-group list-group-flush"></ul>
6        <ul class="list-group list-group-flush"></ul>
7        <ul class="list-group list-group-flush"></ul>
8        <ul class="list-group list-group-flush"></ul>
9        <ul class="list-group list-group-flush"></ul>
10      </div>
11
12      <!--img------->
13      <div class="col-sm-5" >
14        <div style="#"><ul>###</ul></div>
15          <div class="d-flex align-items-center" >
16            <div style="padding:0.5rem;">
17               <%= image_tag event.image.url(:thumb), class: "inner img-fluid"%>
18            </div>
19          </div>
20        </div>
21     </div><!--col-sm-5-->
22   </div><!--class="row no-gutters"---->
23</div><!--class="card mb-3"---->
24

HTML左側
1<div class="col-sm-7 border-right">
2  <ul class="list-group list-group-flush">
3    <li class="list-group-item">0名</li>
4    <li class="list-group-item">金額：0円</li>
5    <li class="list-group-item">合計募金額：0円</li>
6    <li class="list-group-item">
7    <ul class="list">
8      <li class="list"><a href="/events/6">確認</a></li>
9      <li class="list"><a href="/events/6/edit">編集</a></li>
10      <li class="list"><a data-confirm="全てのデータが削除されます。" rel="nofollow" data-method="delete" href="/events/6">削除</a></li>
11    </ul>
12    <li class="list-group-item"><a href="/events/6/reports">経過報告を作成する</a></li>
13    <li class="list-group-item"><a href="/users/csv.csv?event_id=6">名簿を出力(csv)</a></li>
14  </ul>
15</div>

HTML右側
1<div class="col-sm-5" style="height: 100%;">
2<!--<公開非公開>-->
3  <div style="padding:0.5rem 0.5rem 0 0;text-align: right;">
4    <ul>
5      <li class="list2"><a class="user_show_public" href="/events/6/public">非公開にする</a></li>
6      <li class="edit_destroy now_public2">公開中</li>
7    </ul>
8  </div>
9<!--img-->
10  <a href="/events/6">
11    <div class="d-flex align-items-center">
12      <div style="padding:0.5rem;">
13        <img class="inner img-fluid" src="/uploads/event/image/6/thumb_thumb_%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89.jpg">
14      </div>
15    </div>
16  </a>
17</div>

m.ts10806

2020/04/21 04:02

Railsですかね・・・タグに入れない、またはフレームワークに依存しない議題なのであれば、 Viewの内容そのままではなく、ブラウザに出力されたHTMLコードを提示するか、別途静的HTMLで作ったコードを提示してください。

akikko

2020/04/21 05:17

ご回答ありがとうございます。 railsで作成しております。ブラウザに出力されたHTMLコードを記載させて頂きましたので、ご一読お願いできますと嬉しいです。

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

回答1件

ベストアンサー

このような形でいかがでしょうか?
とりいそぎstyle="height: 100%;"を追加しています。
d-flexを指定した要素の高さがないと、その内部のコンテンツを中央配置しているように見えないです。

HTML
1<div class="d-flex align-items-center justify-content-center" style="height: 100%;">
2  <div style="padding:0.5rem;">
3    <%= image_tag event.image.url(:thumb), class: "inner img-fluid"%>
4  </div>
5</div>

height: 100%;でなく、height: calc(100% - 1em);などかもしれません。調整お願いします。
もしかしたら、<div style="padding:0.5rem;">が不要かもしれません。

投稿2020/04/21 04:02

編集2020/04/21 04:10