質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1152閲覧

CSS:複数行の時に1行目に合わせて上下中央揃えを行いたい

rapvxsa

総合スコア0

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2022/08/03 15:05

編集2022/08/05 18:16

前提

フロントエンド初学者です
以下のようなコンポーネントを実装したいのですが
なるべく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のリンクになります

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2022/08/04 01:17

どういう見え方にしたいか画像で例示できますか?
guest

回答1

0

こういうことでしょうか?

css

1.multiLine_container { 2 width: 250px; 3 /* display: flex; 4 flex-direction: row; */ 5} 6.big_font { 7 font-size: 20px; 8 margin-left: 4px; 9 display: inline; 10 vertical-align: middle; 11} 12.small_font { 13 font-size: 10px; 14 margin-left: 4px; 15 display: inline; 16 vertical-align: middle; 17}

投稿2022/08/04 01:45

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rapvxsa

2022/08/04 08:18

ありがとうございます! Aの下に文字が行って欲しいわけではなく 追記した画像のようなものをイメージしています! またflexでこれを作るのは難しいでしょうか?
Lhankor_Mhy

2022/08/04 09:02

フレックスボックスでは難しいような気がしてます。 (ベースライン合わせならできるかも?)
rapvxsa

2022/08/04 20:01

そのやり方を教えていただいてもよろしいでしょうか
Lhankor_Mhy

2022/08/05 02:47 編集

align-items: baseline; とすれば、A のベースラインと、テキスト1行目のベースラインとが合うはずです。 ただ、実際にやってみると、フォントによっては、Qのひげがベースラインより下のディセンダー領域にあり、Aと日本語は全てベースラインより上にあると思うので、「なんかずれてる?」という感じがするかもしれないです。 https://ja.wikipedia.org/?curid=3062885
rapvxsa

2022/08/05 08:58

> Qのひげがベースラインより下のディセンダー領域にあり、Aと日本語は全てベースラインより上にあると思うので、「なんかずれてる?」という感じがするかもしれないです。 まさにその通りな状態になってしまいました。。。そもそもこういうデザインはアンチパターンになるのでしょうか
Lhankor_Mhy

2022/08/05 09:16

web のフォントコントロールは、アドビの Ai や Ps などと比べて貧弱です。 また、OSによってフォントのメトリックスが変わることや、そもそもクライアントでどのようなフォントで表示されるかについて完全にコントロールするのは難しいことを考えると、ある程度のところで妥協せざるを得ない場合があるかと思います。 今回のようなケースは、Qがベースラインの上にいるフォントをwebフォントで指定してしまうか、@font-faceでディセンダーを調整してしまうか、で対応できそうな気がします。 https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/descent-override ただ、それなりに知識と手間が必要なので、もしかしたらQとAを画像で対応した方が手間なく見た目をコントロールしやすいかもしれないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問