align-items: center内の要素が改行されない問題の対処策。

align-items: center内の要素が改行されない問題の対処策。

実現したいのはこちらです。

  • リンク付きテキスト。
  • aタグをflexboxとし、背景を表示。
  • flexbox内で上下左右センターに表示。
  • アイコンはfontawesomeを使用して背景を設定。

phpコードはこちらです。

<!--//人気ランキングバナー//-->
<div id="lnk_ranking" class="">
<a href="<?php echo home_url(); ?>/ranking"><i class="fa-solid fa-crown"></i><br />1週間の作り置きレシピ<br />人気ランキング</a>
</div>

スタイルはこのように指定しました。

#lnk_ranking a {
display : flex;
align-items : center;
justify-content : center;
width : 100%;
height: auto;
aspect-ratio: 16/9;
padding : 0;
background : url(./images/ranking-banner.jpg) center center;
background-size : cover;
font-family : var(--font-family02);/*Notoフォント指定*/
font-weight : 700;
font-size : 30px;
line-height : 45px;
color : #fff;
text-shadow : 2px 2px 2px #000;
text-align : center;
}
#lnk_ranking a i {
display : inline-block;
font-size : 50px;
line-height : 70px;
width : 70px;
background : #d4c018;
border-radius : 35px;
}

aspect-ratio: 16/9;は、隣にYouTubeコンテナがあり、それと高さを揃えるために指定しました。

ところが、上記のままでは、inline-blockを指定したfontawesomeのアイコンが改行されません。

inline要素である「1週間の作り置きレシピ<br />人気ランキング」が改行されていることから、アイコンに背景色をつけるためのinline-block指定が邪魔をしているのは確かです。

センタリングしたい要素をflexbox内で「1つのinline要素」として認識させれば良いかと、以下のようにphpを変更しました。

<!--//人気ランキングバナー//-->
<div id="lnk_ranking" class="">
<a href="<?php echo home_url(); ?>/ranking"><span><i class="fa-solid fa-crown"></i><br />1週間の作り置きレシピ<br />人気ランキング</span></a>
</div>

これで期待通りに表示されるようになりました。

ボックス内で上下・左右中央揃えするにはflexが便利です。しかしflex故の、想定外の表示エラーもあります。

お役に立てば幸いです。

この記事は2023/09/26に公開され、52 views読まれました。

最近1ヶ月で人気の記事

align-items: center内の要素が改行されない問題の対処策。 - デザイン事務所ダウンアンダー 東京都練馬区。Wordpressはおまかせ。ホームページ・印刷など販売促進のためのデザインを提案します。

Copyright©デザイン事務所ダウンアンダー, All Rights Reserved.