前提
フロントエンド初学者です
以下のようなコンポーネントを実装したいのですが
なるべくscriptに頼らずcssだけで実践したいと考えています。
自分で描いてみたもののうまく再現できないためお力添えを願えないでしょうか。
実現したいこと
- 複数行の時に1行目に合わせて上下中央揃えを行いたい
発生している問題・エラーメッセージ
お恥ずかしながら自分の学習度が浅く、どのプロパティを使えば再現できるのか検討もつきません。
行頭に揃えることはできたのですが一行目で中央揃えをすることはどうすれば良いのでしょうか。
追記
Aと隣の文章の1行目がこの線のような感じでそろうイメージです! この線自体は不要です!
該当のソースコード
html
1<!DOCTYPE html> 2<link rel="stylesheet" href="index.css" /> 3<html lang="en"> 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <title>Static Template</title> 9 </head> 10 <body> 11 <div> 12 <div class="singleLine_container"> 13 <div class="big_font"> 14 Q 15 </div> 16 <div class="small_font"> 17 1行目に合わせた中央揃えがしたいです 18 </div> 19 </div> 20 <div class="multiLine_container"> 21 <div class="big_font"> 22 A 23 </div> 24 <div class="small_font"> 25 文字数がめちゃくちゃたくさんで複数行になっていて、一行目同士で上下中央に揃えたいにしたい場合はどうすれば良いですか。 26 「文字数がめちゃくちゃたくさんで複数行になって」の部分とAが中央の位置という意味です。 27 </div> 28 </div> 29 </div> 30 </body> 31</html>
css
1.singleLine_container { 2 width: 250px; 3 display: flex; 4 flex-direction: row; 5 align-items: center; 6} 7 8.multiLine_container { 9 width: 250px; 10 display: flex; 11 flex-direction: row; 12} 13 14.big_font { 15 font-size: 20px; 16 margin-left: 4px; 17} 18 19.small_font { 20 font-size: 10px; 21 margin-left: 4px; 22}
試したこと
https://codesandbox.io/embed/zen-mcnulty-dpqbz5?fontsize=14&hidenavigation=1&theme=dark
codeSandboxのリンクになります
どういう見え方にしたいか画像で例示できますか?