中央寄せができません。

Question

  <div class="top">
    <div class="top-text">
      <h3>美容師が輝くためのマッチングサイト</h3>
      <p>
        多くの美容師は日々、お客様のために練習に励んでいます。
        <br> その、日々の練習の成果をたくさんの美容師と共有しませんか？
        <br> このサイトの使い方は人それぞれです。
        <br> あの美容師のスキルを盗みたい。
        <br> 練習の成果をアウトプットしたい。
        <br> 美容師として有名になり、のし上がりたい。
        <br> 全ての美容師へ、美容師だけのためのサービスです。
      </p>
    </div>
  </div>

.top {
  text-align: center;
  position: relative;
  font-family: 'Noto Serif JP', serif;
  height: 20em;
}

.top-text {
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```画像はプレビューです。
![イメージ説明](91472e8a94ff775ee6303a05e112e3be.png)
わかるかたおりましたら、ご教授お願いいたします。

Comments

[kei344]

（質問文は編集できます）コードはスクリーンショットでなくコードブロックにテキストでお書きください。

[nekora]

画像だけ見たら中央寄せ出来てる様にみえるんですが、外枠も含めてスクリーンショットしないと
ずれてるかどうか分からないと思いますよ。

[19941224ngng]

すみません、後ほど修正させていただきます。
今は画像を開いて確認したいただけるとありがたいです。

[退会済みユーザー]

中央寄せと中央に配置は使い分けましょう。

中央寄せ（センタリング）は現状できてます

Answer 1

何を中央寄せするのか、目的語がないので、質問が不明確です。
また、水平位置で中央寄せ（中央配置）、垂直位置で中央寄せ（中央配置）なのかも明確にしてもらう必要があります。

とりあえず、
テキストを中央寄せ
.top-textブロックをtopブロック内で、水平位置、垂直位置とも中央寄せ
という仕様だとして、
flexを使うと下記のような感じでしょうか。

.top {
  font-family: 'Noto Serif JP', serif;
  height: 20em;  
  display: flex;
  justify-content: center; /*水平位置中央配置*/
  align-items: center;     /*垂直位置中央配置*/
  border: 1px solid;
}

.top-text {
  text-align: center; /*テキスト中央寄せ*/
  background-color: lightgray;
}

レイアウトが分かりやすいように背景色と境界線を追加しています。

中央揃えをする方法はいろいろありますが、今なら CSS Flexbox を使うのが一番シンプルで分かりやすいと思います。
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

Comments

[19941224ngng]

わかりづらい質問ですみませんでした????
justify-content: center;
align-items: center;
は初めて使いましたがとてもうまく行きました。
ありがとうございます！

Answer 2

[1] 単に文字を中央に寄せるだけならこちら

.top-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0; /* 追加 */
  right: 0; /* 追加 */
  transform: translateY(-50%);
}

[2] 背景色をつけて、背景色のエリアごと中央に寄せたいならこちら

.top-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 0; /* 追加 */
  right: 0; /* 追加 */
  width: 500px; /* 追加、文章の長さに合わせて横幅の数値を変更してください。 */
  margin: 0 auto; /* 追加 */
  transform: translateY(-50%);
}

で、実装できると思います。

Comments

[退会済みユーザー]

inline要素（幅自動調整）で行けなかったけ？