Q&A
ご回答ありがとうございます。
> .question_text {
vertical-align: middle;
}
こちら実行しましたら、「question_number」の要素を「question_text」の要素と同じくらいの位置に配置することが出来ました。
少々疑問なのですが、なぜ「question_text」の要素に「vertical-align: middle;」を設定することで、question_numberの要素を上側に押し上げることが出来るのでしょうか...?
前提・実現したいこと
question_numberクラスの要素を上に押し上げたいと考えています。
具体的には、数字の「2」の真横辺りに配置したいです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="./css/style.css"> 7 <title>Document</title> 8</head> 9<body> 10 <div class="main_content"> 11 <p> 12 <span class="question_number">(1)</span> 13 <span class="question_text">2 + 1 = </span> 14 <input type="text" class="answer_box"> 15 </p> 16 <p> 17 <span class="question_number">(2)</span> 18 <span class="question_text">3 + 1 = </span> 19 <input type="text" class="answer_box"> 20 </p> 21 <p> 22 <span class="question_number">(3)</span> 23 <span class="question_text">4 + 1 = </span> 24 <input type="text" class="answer_box"> 25 </p> 26 </div> 27</body> 28</html>
css
1 2body{ 3 background-color: #E5E2DE; 4} 5.main_content{ 6 width: 30%; 7 margin:0 auto; 8 margin-top:3%; 9} 10.question_number{ 11 color:#959492; 12 margin-right:5%; 13 margin-bottom:1%; 14} 15.question_text{ 16 font-size:3rem; 17}
試したこと
question_numberの要素に対して、margin-bottom及びpadding-bottomを設定したのですが、要素が上に押し上げられない状況です。
どなたか、ご助言頂けましたら幸いです。
回答2件
0
ベストアンサー
css
1.main_content p{ 2 display: flex; 3 align-items: center; 4} 5
投稿2020/12/16 03:35
総合スコア116724
0
こんにちは。
こうするとどうでしょうか？
css
1.question_text { 2 vertical-align: middle; 3}
もし、input要素の位置を変えなくないならば、これはどうでしょうか？
css
1.question_number { 2 vertical-align: 50%; 3}
投稿2020/12/16 03:26
編集2020/12/16 03:41
総合スコア36960
なかなかややこしい話なのですが、聞きたいですか？
Lhankor_Mhyさんに、先にご回答頂いていたのですが、flexboxを実装する方向で今回は実装していきたいと考えました為、ベストアンサーはyamabe.jsさんにさせて頂きました。
Lhankor_Mhyさんにもご親切にご回答頂きまして、感謝しております。
>なかなかややこしい話なのですが、聞きたいですか？
こちらですが、可能でありましたら、次に同様の問題に直面した際の為にも、根本的な部分の理解が必要と考えています為、教えて頂きたいです
https://jsfiddle.net/Lhankor_Mhy/aoqwguds/
サンプルを作成しました。
ひとつ目は回答の vertical-align: middle を設定し、ふたつ目は初期値の vertical-align: baseline になっています。
vertical-align: middle はその中心を、親要素のx-heightの半分に合わせる、という効果です。
ですので、「2+1＝」の中心が、「Mx」のうちの「x」の中心にあっているかと思います。
一方で、 vertical-align: baseline は、ベースラインを親要素のベースラインに合わせる、という効果です。
ですので、「2+1=」の文字の下辺と「Mx」の文字の下辺があっているかと思います。
---
インライン要素はかなりややこしい仕様になっているので、CSSのデザインではなるべく排除した方が想定するデザインに近づけることができます。yamabejpさんのご回答をBAとしたのはご慧眼だと思います。
ご丁寧にご助言頂きまして、ありがとうございます。
> vertical-align: middle はその中心を、親要素のx-heightの半分に合わせる、という効果です。
ご親切に教えて頂いているにも関わらず申し訳ないのですが、どうも「.question_text」に対して、「vertical-align: middle」を設定することで、「Mx」の位置まで真ん中になるという所が、正直な所分からない状況です...
ややこしい話ですよね。
たぶん、inline-blockとかに関わらなければ、理解できなくても特に問題ないと思いますので……
了解しました。
取り敢えずは、インライン要素に適用する、CSSは最小限にして、実装していきたいとお思います。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/16 03:54