HTML/CSSで表示させた画像の真ん中にアイコンを表示させたい。

Question

イメージとしてはこのようなことがしたいです。

imgタグで表示させた画像にhtmlとcssでアイコンと文字を画像の任意の位置（真ん中辺り）に表示させたいと思っています。

無理やり考えた方法としては
imgタグ
divタグ（fontawesomeアイコン）
divタグ(文字)

と並列（同じ階層）にして、
両方のdivタグにposition relativeを設定、top,leftにpx単位で数値を入れてgooglechromeのコンソールを使って真ん中に合わせるといったやりかたです。

このやりかたでも大体は思った通りの配置にはなるですが、px単位で設定してるのでデザインとしては汚いやり方かな、と思っています。
何かキレイにイメージ画像のようにキレイに配置する方法はないでしょうか？

Answer 1

適当ですが。

<div class="wrap">
	<img src="https://placehold.jp/24/cc9999/993333/350x350.png" alt="">
	<div class="text">
		<div class="icon">i</div>
		<p>
			text text text text text text
		</p>
	</div>
</div>

.wrap {
	height: 100px;
	position: relative;
	text-align: center;
	width: 100px;
}
.wrap >  img {
	display: block;
	width: 100%;
}
.wrap p {
	margin: 0;
}
.wrap .icon {
	display: inline-block;
}
.wrap >  .text {
	left: 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0px, -50%);
}
```**動くサンプル：**[https://jsfiddle.net/59jrj0ko/](https://jsfiddle.net/59jrj0ko/)

Comments

[dongw]

回答ありがとうございます。
わざわざサンプルまで作っていただき大変感謝しております。
ここでの例なのですが、wrapというdiv要素の階層の下にimg要素がないと質問内容のスタイルを表現するのは不可能ということでしょうか？
理解不足で申し訳ないですが補足いただけるとありがたいです。

[kei344]

> imgタグで表示させた画像にhtmlとcssでアイコンと文字を画像の任意の位置（真ん中辺り）に表示させたい
ご自身の質問内容を再度ご確認ください。

失礼しました、位置関係の話という事でしょうか。その場合どうしたいかを提示されなければ可能かどうかはわかりません。

[kei344]

補足せよ、という箇所を読み落としていました。

雑に作ったので適当なところが多いです。
「.wrap」は別に .user でもどんな名前でも良くて、囲っているから .wrap にしただけです。
「 > img」は別に「 img」でも良いですが、その場合テキストの中にインラインの画像（アイコンとか）を入れた場合問題が起こるので、ある程度絞っている、くらいの理由です。

「.wrap > .text」でやっていることは、高さ50%（.wrapの50%）の位置に.textを浮かせて、transform: translate(0px, -50%);で高さ50%（.textの50%）分上にずらしています。それで縦中央あたりに.textが配置されています。

[dongw]

補足ありがとうございます。
私の質問の意図としては、元の私の環境がimgと同じ大きさになる親要素のdiv要素というものがありません。
挙げていただいた。サンプルですと、

<img src="https://placehold.jp/24/cc9999/993333/350x350.png" alt="">
<div class="text">
<div class="icon">i</div>
<p>
text text text text text text
</p>
</div>

という構成に近いと思います。
ここで書いてくださったcssを編集して

img {
display: block;
　　height: 100px;
position: relative;
text-align: center;
width: 100px;
}
p {
margin: 0;
}
.icon {
display: inline-block;
}
.text {
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0px, -50%);
}

としても思った通りの配置にはなりません。
やったこととしてはwrapという囲っていた要素を削っただけですが、このdiv要素が重要である、ということでしょうか？という話でした。
分かりづらくて申し訳ないですがよろしくお願いします。

[kei344]

position: relative; は配下の要素にしか効きません。なので img に設定してもそのようにはなりません。
.wrap を用意したのはそのためです。

幅と高さが決まっているなら方法はあるかもしれませんが、隣接する要素がどのようになっているのかがわからない状態ではなんとも答えにくいです。（HTML/CSSがどのように組まれていて、どのようなデザインの中に組み込まれるのかなどが不明）

[dongw]

なるほど。position:relativeでtextとiconクラスの位置を指定してたわけですね。
大変勉強になりました。
あとは自分の環境と照らし合わせて自力でやっていこうと思います。
ありがとうございました。

Answer 2

画像をdivの背景として使用するのはいかがでしょうか。

.sample {
  background-image: url("hoge.png")
}

Comments

[dongw]

コメントありがとうございます。
ruby on railsで作っているアプリでして、
画像はユーザーごとに違う画像が表示されるようにビューでrubyのタグを使っているため、cssで固定、ということをしてしまうと、どうしようもなくなってしまうので今回は考えておりません。