子要素の中にあるテキストが上下の中央になるので、上ぞろえにしたい。

実現したいこと

divの子要素の高さををflexで親要素の高さにそろえた時、
子要素の中にあるテキストが上下の中央になるので、上ぞろえにしたい。

前提

独自のCMSを使っているため、HTMLの書き換えができないのでCSSで解決したい。

該当のソースコード

HTML記述は以下の通りです。
ソースコード

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

該当のCSSのコード
.parts05{
display: flex;
}

.parts05 .child {
vertical-align: top;
background-color:#ffffff;
}

.parts05 .child .txt {
display: flex;
align-items: flex-start;
}

HTMLソースには不要な部分もあるかと思いますが、CMSで吐き出しているためです。ご容赦ください。

コメントを投稿

0 コメント