文字が上に動かなくて困っています

【文字が上に行かない】

横には動くんですがどうしても縦に動かないです。
分かりにくい質問で申し訳ないです。

下にコードと問題の写真を貼っておきます。

<div class="PRODUCT"> <h2>PRODUCT</h2> <div class="photo"> <img class="Pamphlet" src="img/パンフレット①.png"> <div class="guide">The World Festival Guide -海外の<br>音楽フェス完全ガイド-</div> <img class="Pamphlet" src="img/パンフレット②.png"> <div class="guide">この世界で死ぬまでにしたいこと<br>2000</div> <img class="Pamphlet" src="img/パンフレット③.png"> <div class="guide">365日日本一周絶景日めくり<br>カレンダー</div> <img class="Pamphlet" src="img/パンフレット④.png"> <div class="guide">PASSPORT NOTEBOOK series</div> <img class="Pamphlet" src="img/パンフレット⑤.png"> <div class="guide">ひとり旅英会話BOOK</div> <img class="Pamphlet" src="img/パンフレット➅.jpeg"> <div class="guide">日本の絶景ポストカード 春編</div>

 </div>

.PRODUCT{
& h2{
margin-left:54px;
}

& .photo{
display: flex;
flex-direction: column;

& .Pamphlet{
width:30%;
}
& .guide{
width:260px;
position: relative;
left:31%;
top:50%;

}
}
}

![]

hatena19

2020/08/30 08:30

画像の横にテキストを持ってきたいということですか。テキストの位置は、画像の上辺に揃えるのですか。それとも上下中央位置に配置するのでしょうか。

NTRCFWggg

2020/08/30 09:41

そうです。画像の横にテキストを持っていきたいんです。

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

回答1件

ベストアンサー

下記でどうでしょうか。

scss
1.PRODUCT{
2  & h2{
3    margin-left:54px;
4  }
5
6  & .photo{
7    display: flex;
8    flex-wrap: wrap;
9    align-items: center; /* 上下中央揃え */
10/*    align-items:flex-end; 下揃え */
11    width: calc(30% + 260px);
12
13    & .Pamphlet{
14      width:calc(100% - 260px);
15    }
16    & .guide{
17      width:260px;
18
19    }
20  }
21}