要素を上に押し上げる方法

前提・実現したいこと

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件

ベストアンサー

css
1.main_content p{
2  display: flex;
3  align-items: center;
4}
5

投稿2020/12/16 03:35

yambejp

総合スコア114814

ruuuu

2020/12/16 03:54

ご回答ありがとうございます。当初、pタグの中身の要素をspanタグで囲っていなかった為、display:flexの選択肢は外していたのですが、冷静に考えてみますと、display:flexを使用すれば解決できる問題ですよね...

行動規範の内容に同意します

こんにちは。

こうするとどうでしょうか？

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

Lhankor_Mhy

総合スコア36087

ruuuu

2020/12/16 03:41 編集

ご回答ありがとうございます。 > .question_text { vertical-align: middle; } こちら実行しましたら、「question_number」の要素を「question_text」の要素と同じくらいの位置に配置することが出来ました。少々疑問なのですが、なぜ「question_text」の要素に「vertical-align: middle;」を設定することで、question_numberの要素を上側に押し上げることが出来るのでしょうか...?

Lhankor_Mhy

2020/12/16 03:48

なかなかややこしい話なのですが、聞きたいですか？

ruuuu

2020/12/16 04:03 編集

Lhankor_Mhyさんに、先にご回答頂いていたのですが、flexboxを実装する方向で今回は実装していきたいと考えました為、ベストアンサーはyamabe.jsさんにさせて頂きました。 Lhankor_Mhyさんにもご親切にご回答頂きまして、感謝しております。 >なかなかややこしい話なのですが、聞きたいですか？こちらですが、可能でありましたら、次に同様の問題に直面した際の為にも、根本的な部分の理解が必要と考えています為、教えて頂きたいです

Lhankor_Mhy

2020/12/16 05:03

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としたのはご慧眼だと思います。

ruuuu

2020/12/16 09:24

ご丁寧にご助言頂きまして、ありがとうございます。 > vertical-align: middle はその中心を、親要素のx-heightの半分に合わせる、という効果です。ご親切に教えて頂いているにも関わらず申し訳ないのですが、どうも「.question_text」に対して、「vertical-align: middle」を設定することで、「Mx」の位置まで真ん中になるという所が、正直な所分からない状況です...

Lhankor_Mhy

2020/12/16 14:27

ややこしい話ですよね。たぶん、inline-blockとかに関わらなければ、理解できなくても特に問題ないと思いますので……

ruuuu

2020/12/17 01:08

了解しました。取り敢えずは、インライン要素に適用する、CSSは最小限にして、実装していきたいとお思います。

行動規範の内容に同意します

あなたの回答