egao_
@egao_

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

[CSS]divを中央に配置したい

解決したいこと

現在Reactで投稿用フォームを作成しています。
JSXのHTMLとCSSの記述で苦戦しております。

「1.基本データを入力してください」等のdivコンテンツが左に寄っているため
中央に配置されなく苦戦しています。

該当するソースコード

HTML

<div className="recruitmentPage">
  <h1>里親を募集する</h1>
  <div className="container">
    <h2>1.基本データを入力してください</h2>
~省略~
  </div>
  <div className="container">
    <h2>2.詳細を入力してください</h2>
~省略~
    </div>
  </div>
  <button className="postButton">投稿する</button>
</div>

CSS

.recruitmentPage {
  align-items: center;
  justify-content: center;
}

.container {
  background-color: white;
  border-radius: 10px;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 70%;
  padding: 10px 40px;
  margin: 20px;
}

試したこと

以下のCSSが適用されないので解決に時間がかかっています。
align-items: center;
justify-content: center;

0

2Answer

なので「className」で問題はないです。

失礼しました!

recruitmentPageに「display:flex」と「flex-direction: column;」を指定するのはどうでしょうか?

See the Pen Untitled by yotty (@yotty) on CodePen.

1Like

Comments

  1. @egao_

    Questioner

    ご教示いただいた通りに修正したら出来ました!!!
    ありがとうございます;;
  2. 解決したようでよかったです!

見当違いなことでしたらすみません。
「className」ではなく、「class」ではないでしょうか?

0Like

Comments

  1. @egao_

    Questioner

    コメントありがとうございます!
    記載し忘れておりました。React、TypeScriptで開発をしています。
    なので「className」で問題はないです。
    今回JSXのところでわからなかったのでHTML、CSSとしていました。

Your answer might help someone💌