flexboxで文字列を縦横中央寄せにしたい

前提・実現したいこと

text要素の文字列を縦横中央に配置したい。
現状のコードでは横の中央寄せにしかなりません。

text要素の背景画像のサイズは幅1100px　高さ170pxです。

該当のソースコード

<HTML> ```ここに言語名を入力 <section id="container"> <article class="text"> <p>テキストテキストテキストテキストテキスト</p> </article> </section> ``` <CSS> ```ここに言語名を入力 #container { width:1100px; margin:0 auto; }

.text {
	width:1100px;
	background-image:url(test.png);
	background-repeat:no-repeat;
  padding-bottom:170px;
	
}

.text p {
	display:-webkit-box;

display:-ms-flexbox;
display:flex;
flex-flow: wrap;
justify-content: center;
}


### 試したこと
Flexboxの部分を下記のようにしてみましたが、横の中央寄せにはなるんですが。、縦の中央にはなりませんでした。
```ここに言語を入力
display: flex;
  flex-direction: column;
  align-items: center;

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

回答1件

ベストアンサー

とりあえずdisplay: flexは以下の指定で縦横中央になります。

css
1.text {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

justify-contentで横
align-itemsで縦の指定が出来ます。

paddingは余白なので上下中央の対象になりません。

サンプル
https://codepen.io/recal/pen/poWwQeV

投稿2021/12/20 10:40

recal

総合スコア1128

退会済みユーザー

2021/12/20 10:41

ありがとうございます。背景画像を全部表示さでるためにpaddingを使いましたが、他の方法で画像を全部表示させた方がいいのでしょうか？

recal

2021/12/20 10:48 編集

用意されている背景画像が1100x170pxということでしょうか？サンプルの.text2の方が高さ170pxでテキストが縦横中央になるようになってます。背景画像の指定でbackground-sizeというのがあるのでそれを使うのがいいと思います。 https://developer.mozilla.org/ja/docs/Web/CSS/background-size 隙間が出来ても全部を表示させたい場合は background-size: contain; background-repeat: no-repeat; 要素いっぱいに隙間なく表示したい場合は background-size: cover; になります。

退会済みユーザー

2021/12/20 10:50

ありがとうございます。やってみます。

退会済みユーザー

2021/12/20 10:51

background-size: contain; で試してみましたが、背景がぞが文字列の高さに縮小されて小さく全体表示されてしまいました。

退会済みユーザー

2021/12/20 10:54

すいません。height:170pxのところで記述ミスがあったようで直したらできました。

recal

2021/12/20 10:56

サンプルアップデートしました。 https://codepen.io/recal/pen/poWwQeV