align-items: center内の要素が改行されない問題の対処策。
2023年09月26日
実現したいのはこちらです。
- リンク付きテキスト。
- 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に公開され、99 views読まれました。
