CS Grid の上下中央寄せにしたい

したいこと

二つのブロック要素をgridを使用して、上下中央にしたい

現状

イメージ説明

画像のようになっており、縦方向の中央寄せをしたいと考えています。

コード

css

1.register_container {2 display: grid;3 grid-template-columns: 1fr 1fr;4 place-items: center;5 justify-items: center;6}

HTML

1<section id=""> 2 <div class="register_container"> 3 <div class="register_content"> 4 5 <div class=""> 6 <%= link_to '新規登録(指導員)', new_instructor_path %> 7 </div> 8 9 <div class=""> 10 <%= link_to 'ログイン(指導員)', new_instructor_session_path %> 11 </div> 12 </div> 13 14 <div class="register_content"> 15 16 <%# 学校側の新規登録 @ueda %> 17 <div class=""> 18 <%= link_to '新規登録(教員)', new_instructor_path %> 19 </div> 20 21 <div class=""> 22 <%= link_to 'ログイン(教員)', new_school_session_path %> 23 </div> 24 </div> 25 </div> 26</section> 27

現状のコードになります。

理想

デザインツールで簡単に作成しております。
イメージ説明

このようにgridで横並びにし、上下中央寄せのgrid-gapを使用して間隔を取りたいと考えています。

教えていただけますと幸いです。
よろしくお願い致します。

コメントを投稿

0 コメント