したいこと
二つのブロック要素を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 コメント