テキストが中央に揃わないです。

Question

上記画像のようにしたいのですが、画像内の文字と下のテキストが、下記画像のように中央に揃いません。

        <article class="document_request__area">
            <div class="document_request__wraaper">
                <img  class="document_request__img" src="./images/cta.jpg" alt="まずは資料請求から">
                <div class="request_img--inner">
                <h2 class="document_request__title">まずは無料で資料請求から</h2>
                <a class="btn mavinvisual__btn" href="#">資料請求</a>
                <a class="mainvisual__wrraper--contact" href="#">お問い合わせ</a>
                </div>
            </div>
    <!--document_request__wraaper-->
        <div class="contact__wrapper">
            <p class="contact__wrapper__txt">お電話でのお問い合わせはこちら</p>
            <p class="contact__wrapper__phone">  0123-456-7890</p>
            <p class="contact__wrapper__time">平日  08:00~20:00</p>
        </div>
        </article>

.document_request__area{
  padding: 0;
}
.document_request__img{
  max-width: 1280px;
}

.document_request__wraaper {
position: relative;
margin-bottom: 20px;
}

.request_img--inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.document_request__title{
  font-size: 32px;
  margin-bottom: 14px;
}

.contact__wrapper{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  color: var(--basecolor);
  font-size: 16px;
  font-weight: bold;
}

.contact__wrapper__phone{
  font-size: 36px;
}

.contact__wrapper__time {
  font-weight: normal;
}
.contact__wrapper__txt, .contact__wrapper__phone{
  padding-right: 20px;
}

.contact__wrapper クラスののdisplay flex , justify-content: center; , align-items: center;を解除し、 textalign: center; とすると下記画像のようにセンターが揃うのですが、

※画像は

.contact__wrapper__txt, .contact__wrapper__phone{
  padding-right: 20px;
}

も解除しています。

１枚目の画像のように画像下の文字を横並びにしつつセンターに揃えるにはどうしたらいいでしょうか?

Comments

[Takumiboo]

私には2枚目の画像のほうが中央に揃っているように見えますが。

[Fukusuke0604]

添付画像１枚目(完成見本)は
「お電話でのお問い合わせはこちら 0123-456-7890 平日 08:00~20:00」の文字と、その上の画像内のテキストがセンターに揃っています。

しかし、私が書いたコードでの表示（添付画像２枚目）は
画像内のテキストとその下の「お電話でのお問い合わせはこちら 0123-456-7890 平日 08:00~20:00」
がセンターに揃っていません。

[Takumiboo]

いえ、1枚目は「お電話での」などが左にはみ出ていることから分かるように、左に寄っています。
2枚めは資料請求ボタンなどと見比べるとわかりますが、左右の中央にあるように見えます。
.contact__wrapperに対して中央揃えになるように指定しているので、指定通りになっていると思います。
それとも、電話番号の部分を中央に寄せて、「お電話での～」と「～20:00」は左右がずれていても良いということでしょうか？

[Fukusuke0604]

すみません。私の知識不足で、おっしゃられている 『「お電話での」などが左にはみ出ている』とうのがよくわかりません。。。

添付画像１枚目の完成見本と添付画像2枚目の私の製作物とでは表示が異なっていることはご理解頂けていると思います。
添付画像１枚目の完成見本と同じ表示するにはどうすればいいでしょうか?

[Fukusuke0604]

.contact__wrapper クラスに margin-rightで「お電話でのお問い合わせはこちら 0123-456-7890 平日 08:00~20:00」の文字を左に寄せていく方法でなら完成見本(添付画像１枚目)に近づけることはできました。

私は自分のコードが(添付画像2枚目)「お電話でのお問い合わせはこちら 0123-456-7890 平日 08:00~20:00」の箇所がセンターからずれていると認識していたのですが、完成見本の方が左に寄せていたということでしょうか?

[Takumiboo]

知識不足とかではなくて、見た目の問題ですが…。
「まずは資料請求から」でも「資料請求」ボタンでも良いのですが、その両端から下に線を伸ばしてみれば、2枚めのほうが「お電話での～～～20:00」が中央にあることが分かると思うのですが…。
要するに何が言いたいかと言うと、「お電話での～～～20:00」全体が中央揃えになっているということです。それは全体を囲んでいる.contact__wrapperに対して中央揃えを当てているので、指定通りということです。
もしそうではなくて電話番号を中央揃え、それぞれ左右にはみ出したいということであれば、別の指定をする必要があるでしょう。

[Fukusuke0604]

.contact__wrapper でみるのではなく、電話番号(0123-)を中央揃えで完成見本になるように修正します。

.contact__wrapper部分がセンターに来ていないのだと思い込んでいました。
ありがとうございました。

Answer 1

解決済みですが、興味深い題材なのでチャレンジしてみました。

仕様

電話番号.contact__wrapper__phoneを中央寄せ
電話番号の左側にテキスト.contact__wrapper__txt
電話番号の右側にテキストcontact__wrapper__time
を配置。

HTMLは質問のまま。

* {
  margin: 0; /* 初期値リセット */
}

.document_request__area{
  padding: 0;
  text-align: center; /* 追加 */
}

/* 中略 */

.contact__wrapper{ /* このブロックは大幅に修正 */
  display:inline-block; /* インラインブロックにすることで親のtext-align:centerで中央寄せ */
  color: var(--basecolor);;
  font-size: 16px;
  font-weight: bold;
  position: relative;
}

.contact__wrapper__phone{
  font-size: 36px;
}

.contact__wrapper__time {
  font-weight: normal;
}
.contact__wrapper__txt, .contact__wrapper__phone{
  padding-right: 20px;
}

/* 以下追加 */
/* position: absolute;で電話番号の左右にレイアウト */
.contact__wrapper__txt {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-100%, -50%);
}

.contact__wrapper__time {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(100%, -50%);
}

Comments

[Fukusuke0604]

ご協力ありがとうございます。
電話番号のみを中央寄席、電話番号の両横のそれぞれのテキストを左右に寄せることで実現できますよね。

まずは見た目の思い込みでハマってしまい、そのご同じアイデアをいただき一つ勉強になりました。

Answer 2

コメントにあったとおり、margin等で目視で調整していく方法も一つあると思いますが、
もう一つ思いついた方法としては、その行を3つのカラムに分け、左のカラムに「お電話でのお問い合わせはこちら」を格納して右揃え、中央のカラムに「0123-456-7890」を格納して中央揃え、右のカラムに「平日 08:00~20:00」を格納して左揃え、などにすれば見た目は近くなるのではないでしょうか。

お手本のソースを覗いて、実際どのように実現しているのか見てしまってもいいとは思いますが。

Comments

[Fukusuke0604]

まずは自分の認識間違いからご指摘して頂き、自分の思いついた方法とは別のやり方まで教えていただきありがとうございました。

教えていただいた方法ですと目視に頼らず綺麗に見本通りになりました。
親切に対応いただき本当にありがとうございます。