画像の上に文字を置いてセンターに配置したい。

シルエット画像の真ん中に文字を配置したいのですが配置できません。
divの中のテキストを画像の上に配置して真ん中にしたいということは、
promptlyrespondの中のpにtext-align: centerを使うと思ったのですが違うのでしょうか？
markerにtext-align: centerを使用しても何も変わりませんでした。
あと、画像が画面の拡大縮小に合わせてても変わらなかった時に、テキストが画像の下に配置されているようでしたが、
画像の上に配置するようになっていないのでしょうか？
今はテキストが左に配置されているので画像の下に配置されているのか上に配置されているのかわかりません。

<html>
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" href="サンプル１.css">

<title>無題ドキュメント</title>
</head>

<body>

<header>

  <div class="logocontainer">
<img src="社名ロゴ.png" alt="" width="723" height="197" class="logo"/>
    <img src="電話番号.png" width="723" height="197" alt=""/></div>

    </header>


<div class="sample-box">
    <img src="4889996_m.jpg" alt="" width="960" height="540" class="resizeimsge"/>
	
<div class="icon">
  <p class="fadeup">
    <img src="3icon文字.png" alt="" class="iconlogo"/> </p>
    </div>
	</div>

<div class="promptlyrespond">
	<div class="promptlyrespond">
  <style type="text/css">
	.promptlyrespond {
	       background:center;
           background-image: url("大人数シルエット.png");
		background-position: top 30%;
	       background-repeat: no-repeat;
	                 }
	  </style>
	
	
	</div>
	
	
	<p><strong class="marker">迅速対応！</strong></p>	
	
</body>
</html>

/* CSS Document */

header{
    width: 100%;
    maxwidth:1000px;
    margin:0 auto;
    display: flex;
    justify-content: center;
}

header img{
    max-width: 30%;
    height: auto;
}

.logocontainer {
  text-align: center;
    }

.resizeimsge {
    width: 100%;
    max-width: 100%;
    height:auto;
    text-align: center;
    display: flex;
}

.sample-box {
    position: relative;
}


.icon{
      max-width: 100%;
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
	
    position: absolute;
    top: 55%;
    left: 27%;
}

.icon img{
	width: 100%;
}

.fadeup{
	animation: fadeIn 1s ease 1s 1 normal backwards;
}
@keyframes fadeIn {/*animation-nameで設定した値を書く*/
    from{
		opacity: 0;/*アニメーション開始時は不透明度0%*/
	transform: translateY(20px);
}
	to{
		opacity: 1;/*アニメーション終了時は不透明度100%*/
	transform: translateY(0);
	} 
}


/*--迅速対応--*/



.promptlyrespond img {
	width: 100%;
	height: auto;
}

.promptlyrespond p{
	position: absolute;
	
}

.text {
	text-align: center;
}

	.marker {
		font-size: 5vw;
		 background:linear-gradient(transparent 60%, #ffff00 0%); 
	}
	
	
.icon img{
	width: 100%;
}

.fadeup{
	animation: fadeIn 1s ease 1s 1 normal backwards;
}
@keyframes fadeIn {/*animation-nameで設定した値を書く*/
    from{
		opacity: 0;/*アニメーション開始時は不透明度0%*/
	transform: translateY(20px);
}
	to{
		opacity: 1;/*アニメーション終了時は不透明度100%*/
	transform: translateY(0);
	} 
}


/*--迅速対応--*/

.promptlyrespond {
	background-position: 100%;
	margin-top: 20px;
}

.promptlyrespond img {
	width: 100%;
	height: auto;
}

.promptlyrespond p{
	position: absolute;
}

.text {
	text-align: center;
}

	.marker {
		font-size: 5vw;
		 background:linear-gradient(transparent 60%, #ffff00 0%); 
	}

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

回答2件

.promptlyrespond要素にcssのbackground-imageで画像を指定する方法が良いかと思います。

投稿2021/08/13 11:56

webgoto

総合スコア1293

_rei_J

2021/08/13 12:44

ありがとうございます！CSS書き換えました！テキストにdivタグをつけてtext-align: center;をつけたら位置も無事真ん中になりました！しかし、背景に設定した画像上ではなく画像の下に配置されてしまいました。私の中では親要素にposition: relative;をつけてテキストにposition: absolute;をつけたつもりなのですが、背景画像の上にテキストを配置するのにどこが間違っているのでしょうか？

webgoto

2021/08/13 12:57

現状背景画像となっていません。imgタグを使うのではなくcssのbackgroundで画像ファイルを指定しなければいけません。かなり頻繁に使う機能ですのでcssのbackground-image: url()やbackgroundプロパティの使い方を学ばれることをおすすめします。

_rei_J

2021/08/13 13:37

すいません！ミスしたので一度戻ったCSSを書いてしまいました。background-image: url("大人数シルエット.png");を書いてhtmlのimgを消したのですが画像が消えてしまいました。シルエットの上にある画像の下に配置されてしまったのでしょうか？marginやpositionで指定しても画像がなかなか出てきません。CSSにbackground-image: url()を使う場合のHTMLの書き方がわからなかったので、htmlの方に直接 <style type="text/css">で書いてみましたがシルエット画像が出てきませんでした。

webgoto

2021/08/13 14:00

background-imageの書き方は合っていると思います。その状態でcssファイルの方に書いてもらって良いように思います。 htmlの方が記載の状態で見ると.promptlyrespondが2つあったり、<div>と</div>の数が違ったり、おかしな状態になっているようなのでその影響があるのかもしれません。

webgoto

2021/08/14 00:17

よく見ると、.marker要素が.promptlyrespond要素の子になっていないため、.promptlyrespond要素の高さが0になっているのだと思います。

_rei_J

2021/08/16 02:05

色々教えてくださり有難うございました！私の勉強不足によりやはり画像がなかなか出て来ず...背景画像としてのやり方はわかりませんでした（泣）もう一度戻って色々試した結果、画像の上に文字を配置することができました！背景画像としてのやり方も今後勉強していきたいと思います！

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

自己解決

画像の上に文字を置いてかつセンターに配置しようと思いましたが出来ず、背景画像に設定してその上に文字をと教えていただいたのですが、背景画像に設定すると多分メイン画像の下に配置されてしまうのか(?)marginやpositionで色々やるもメイン画像の下に埋もれたままで出て来ず...勉強不足のため私には難易度が高かったみたいです。。。もう一度画像の上に文字を置くやり方を色々試したら出来ましたので載せておきます。
css　.promptlyrespondのmargin-topやmargin-bottom、 .textのtopやleftでサイズを変えれば位置の変更ができました。

変更前↓ div classがそもそも２つ重なっていました。

HTML

<div class="promptlyrespond">
    <div class="promptlyrespond">
  <style type="text/css">
    .promptlyrespond {
           background:center;
           background-image: url("大人数シルエット.png");
        background-position: top 30%;
           background-repeat: no-repeat;
                     }
      </style>


    </div>


    <p><strong class="marker">迅速対応！</strong></p>

変更後↓

HTML

<!--迅速対応-->
	<div class="promptlyrespond">
  <img src="大人数シルエット.png" width="1294" height="249" alt=""/>  

	  <div class="text">
	<p class="maintext"><strong class="marker">迅速対応！</strong></p>
		  
	</div>
	</div>

変更前↓

css
/*--迅速対応--*/

.promptlyrespond {
    background-position: 100%;
    margin-top: 20px;
}

.promptlyrespond img {
    width: 100%;
    height: auto;
}

.promptlyrespond p{
    position: absolute;
}

.text {
    text-align: center;
}

    .marker {
        font-size: 5vw;
         background:linear-gradient(transparent 60%, #ffff00 0%); 
    }

変更後↓


.promptlyrespond{
	position: relative;
}

.promptlyrespond img {
	width: 100%;
    max-width: 100%;
    height:auto;
    text-align: center;
    display: flex;
	margin-top: 20px;
	margin-bottom: 0px;
}
	
.promptlyrespond p{
	width: 100%;
	
}

.text {
	max-width: 100%;
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
	
    position: absolute;
    top: 20%;
    left: 40%;
}

	.marker {
		font-size: 5vw;
		 background:linear-gradient(transparent 60%, #ffff00 0%); 
	}

投稿2021/08/16 02:00

_rei_J

総合スコア4