4つの画像に対する文字列の配置場所について。

Question

プログラミング初心者で恐縮ですが、一つご質問させていただきます。
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要素を付けるべきでしょうか？
ネットで調べても解決策が出ず、何かアドバイスをいただけたら幸いです。

Answer 1

HTMLを変更してよければ、絶対配置をするのが手っ取り早そうです。

サンプル：
https://jsfiddle.net/Lhankor_Mhy/14uepkcn/

<div class="image">
  <a class=link href="url名">
    <img src="http://placehold.jp/150x150.png?text=img/img1.jpg"><span>casual</span></a>
  <a class=link href="url名">
    <img src="http://placehold.jp/150x150.png?text=img/img2.jpg"><span>dress</span></a>
  <a class=link href="url名">
    <img src="http://placehold.jp/150x150.png?text=img/img3.jpg"><span>note</span></a>
  <a class=link href="url名">
    <img src="http://placehold.jp/150x150.png?text=img/img4.jpg"><span>me</span></a>
</div>

/* 追加 */
.link{
  display: flex;
  align-items: center;
  justify-content: center;
}
span{
  position: absolute;
}

Comments

[daakishi]

ありがとうございます。無事、イメージ通りに配置することができました。もし可能であれば、どういう流れで配置できたのか。ご教授頂いてもよろしいでしょうか？

[Lhankor_Mhy]

はい。

フレックスアイテム（display: flex がある要素の子要素）を絶対配置し、
かつ
top: auto;
bottom: auto;
left: auto;
right: auto;
となっている場合、
その要素は、「その要素が唯一のフレックスアイテムだった時に配置されるはずの場所に配置される」という仕様になっています。

https://www.w3.org/TR/css-flexbox-1/#abspos-items

回答のケースでは、
align-items: center;
justify-content: center;
となっているので、フレックスコンテナ（display: flex がある要素）の真ん中に配置されますから、そのようになります。

一方で、文字列が絶対配置されたため、文字列が通常のフローから外れてフレックスレイアウトに参加しなくなりますので、画像が唯一のフレックスアイテムということになります。
したがって、フレックスコンテナは画像と同じ高さを持つようになりますので、文字列はその真ん中に配置される＝画像の真ん中に配置される、ということになります。

[daakishi]

わかりやすい解説ありがとうございました。今後の参考にさせて頂きます。

Answer 2

HTMLでcasualを<div class="title">casual</div>のようにします。
そしてCSSで

div.image a.link {
  position: relative;
}
div.image a.link div.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

これで期待通りでしょうか。