HTML, CSS: 文章を中央寄せにしたい

Question

こんにちは。

現在、HTMLとCSSでホームページを作っています。
以下の様なコードがあるのですが、文字を縦・横の中央寄せにしたいです。

<section id="3" class="gray-back">
        <h2 class="center"><span class="under">申し込みの流れ</span></h2>
<div class="container">
<div class="row flow">
    <div class="col span-3">
		<img src="img/flow.jpg" alt="申し込み">
    </div>
    <div class="col span-9"><p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
    </div>
    </div>	
<div class="row flow">
    <div class="col span-3">
		<img src="img/flow.jpg" alt="申し込み">
    </div>
    <div class="col span-9"><p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
    </div>
    </div>
<div class="row flow">
    <div class="col span-3">
		<img src="img/flow.jpg" alt="申し込み">
    </div>
    <div class="col span-9"><p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
    </div>
    </div>
	</div>
</section>

このページ(CSSで中央寄せする9つの方法（縦・横にセンタリング）)のコード(下画像)を参考にしてみたのですが、このコードだと画面を小さくしていった際に文字と画像が被ってしまいます(本来は画像の下に回り込んで欲しい)。

解決策をご存知の方がいらっしゃいましたら、ご教授ください。よろしくお願いいたします。

・参考サイト(大元のコードのテンプレート)
テンプレどん

＜追加＞

Comments

[hatena19]

「題名」も含めたHTMLコードと、
現状のCSSコードも提示してください。

[toyop]

すみません。コード載せ忘れていました...
こちらになります。よろしくお願いします。
<div class="row flow">
<div class="col span-3">
<img src="img/flow.jpg" alt="申し込み">
</div>
<div class="col span-9 center">
<h3>ここに題名が入ります。ここに題名が入ります。</h3>
<p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
</div>
</div>

[hatena19]

質問は編集できますので、質問に追記してください。
現状のCSSコードの追記もお願いします。

Answer 1

全体のCSSが分からないので、
とりあえず下記でどうかな？

.span-9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

---

https://popo-design.net/template/
の最初のテンプレートを使っているのですね。
テンプレートをダウンロードしてみました。
bootstrap的なCSSフレームワークな造りになっているので、既存のクラスを修正するのは他の部分に影響を及ぼしますので、修正したい要素にクラスを追加して、そのクラスにCSSを設定するようにした方がいいでしょう。

    <div class="row flow">
      <div class="col span-3 flex-col">
        <img src="https://placehold.jp/150x150.png">
      </div>
      <div class="col span-9 flex-col">
        <h3>ここに題名が入ります。ここに題名が入ります。</h3>
        <p>ここに文章が入ります。ここに文章が入ります。ここに文章が入ります。</p>
      </div>
    </div>

画像の親要素と、題名、文章の親要素に、flex-col というクラスを追加します。

.flex-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 以下はお好みで */
.flex-col > img {
  width: 100%; /* 画像の幅を親要素に揃える */
}

以上でどうでしょう。

Comments

[toyop]

hatena19さん
ご回答ありがとうございます。
教えていただいたコードで題名の問題は無事解決したのですが、画面をスマホサイズにしたときに、画像が中央じゃなくて左によってしまうのですが、これの原因分かりますでしょうか。

[hatena19]

https://popo-design.net/template/
の最初のテンプレートを使っているのですよね。
ダウンロードして style.css に上記の CSS追加して確認してみましたか、スマホサイズで画像が左によるとことはないですね。
テンプレートからどこか修正してませんか。

[toyop]

hatena19さん
わざわざ確認していただいたとのことで、お手数おかけしてしまい本当に申し訳ございません。テンプレートのデフォルトの画像だと左に寄らないのですが正方形に近い画像(個人的な写真だったので載せてなかったです。説明不足ですみません)を使うと左によってしまうみたいです。

[hatena19]

回答に追記しておきましたので、ご参照ください。

[toyop]

hatena19さん
教えていただいた方法で無事解決しました！
いつも本当にありがとうございます。

Answer 2

上下左右中央揃えにしたい対象の親要素に対して以下のように指定してください。

.span-9 {
	display: flex;
	justify-content: center;
	align-items: center;
}

中身に文章を含む要素そのものに指定してもいいですが、他にもタグを追加してそれらも中央に寄せることを考慮すると親要素に指定した方が無難です。

Comments

[toyop]

NAOPI-05さん
ご回答ありがとうございます。教えていただいたコードで中央寄せにできました。
追加で一つだけ聞かせてください。文章に題名も付けようと思ったのですが、そうすると題名と本文が横並びになってしまいました(画像を追加しました)。こちらの解決方法も教えていただけないでしょうか。大変申し訳ございません。よろしくお願いいたします。

[toyop]

題名の下に本文が来る様にしたいです。

[NAOPI-05]

span-9 内のpタグの上に見出しを入れるということですか？
それなら「flex-direction: column」を追加して下さい。