お世話になっております。現在サイト製作中の段階で問題があったため質問させていただきます。
今回、flexboxを使用したサイトを制作使用と考え試行錯誤しております。
イメージとしては写真の通りですが、続いているdiv要素のある要素内にさらにdiv要素を作り文字を中央配置させたいと考え制作しています。
そこで、私は下記のようなコードを書きました。
HTML
<div style="" class="main_div"> <a style="" class="title" id="">A</a><br> <div style="" class="sub_div"> <a style="" class="sub_font" id="">a</a><br> <a style="" class="sub_font" id="">b</a><br> <a style="" class="sub_font" id="">c</a><br> <a style="" class="sub_font" id="">d</a><br> </div> </div>
CSS
.main_div { width: 100%; height: 100vh; color: white; background-color: white; display: flex; -js-display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; margin-left:auto; margin-right:auto; } .title { text-align: center; color: black; font-size: 50px; width: 90%; margin-top: 1000px; } .sub_div { width: 85%; height: 75%; background-color: #D8DE3C; border-radius: 90px; text-align: center; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; position: relative; display: flex; justify-content: center; align-items: center; } .sub_font { text-align: center; color: black; font-size: 25px; width: 70%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: relative; margin-right:auto; margin-left:auto; display: flex; justify-content: center; align-items: center; }
しかし、このようなコードを書いた際に文字は左右中央に配置することができましたが縦横に対して中央揃えにならず上寄りの状態になってしまいます。
そこで、今回の問題点である上下中央揃えの方法について教えていただきたいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー