画像の横に文字を重ねたい

上の画像を見てもらいたいのですが、説明と書かれたものを横に表示されている画像の右側に並べたいのですが、並べる方法はありますか?

コード

<img src="img/002.png" alt="002" width="500" height="250" class="img002">
<h1 class="001">説明</h1>

.001{
  background-color: white;
  color: rgb(175, 175, 175);
  text-align: right;
  margin-right: 20%;
  font-size: 35px;
  font-family: 'Kokumr', serif;
  /* margin-top: 30px; */
  width: 100%;
  position: absolute;
}

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

回答1件

ベストアンサー

画像のサイズが固定なら、ネガティブマージンで画像の高さの1/2分上へ移動させればどうでしょうか。

css
1.a001{
2  background-color: white;
3  color: rgb(175, 175, 175);
4  text-align: right;
5  font-size: 35px;
6  font-family: 'Kokumr', serif;
7  margin-top: -142.5px;
8  width: 100%;
9}

HTMLを変更できるなら、画像とテキストをdivで囲んでFlexboxで横並びさせるのがいいでしょう。

html
1<div class="wrapper">
2  <img src="img/002.png" alt="002" width="500" height="250" class="img002">
3  <h1 class="001">説明</h1>
4</div>

css
1.wrapper {
2  display: flex;
3  align-items: center;
4}
5
6.a001{
7  background-color: white;
8  color: rgb(175, 175, 175);
9  text-align: right;
10  font-size: 35px;
11  font-family: 'Kokumr', serif;
12  /* margin-top: 30px; */
13  width: 100%;
14}