プログラミング初心者で恐縮ですが、一つご質問させていただきます。
htmlにて4つの画像内にリンク付きの文字列をそれぞれの画像の中央に配置したいと思っております。
(目的は、ブログホームページ作成です。)
本来、positon要素を使って配置すると思いますが、複数の画像に対してそれぞれの要素の真ん中に配置するということが難しく、行き詰まっている状況です。
HTML
<div class="image"> <a class=link href="url名"> <img src="img/img1.jpg">casual</a> <a class=link href="url名"> <img src="img/img2.jpg">dress</a> <a class=link href="url名"> <img src="img/img3.jpg">note</a> <a class=link href="url名"> <img src="img/img4.jpg">me</a> </div>
css
.image{ display: flex; text-align: center; justify-content: center; transition: 0.3s; } .image img{ display: flex; padding: 10px; width: 300px; height: 200px; } .link{ color: #333; font-size: 20px; }
block要素など、他の属性も試しましたが、思うような配置場所になりません。
一つ一つの画像に別のクラス名をつけて、それぞれposition要素を付けるべきでしょうか?
ネットで調べても解決策が出ず、何かアドバイスをいただけたら幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/09 03:54
2021/09/09 04:12
2021/09/09 06:47