Q&A
前提・実現したいこと
SPANで上下中央にテキストを配置し、
高さも設定したいのですが、displayが1種類しか設定できません(当たり前かもしれませんが)
何か方法はありますでしょうか
該当のソースコード
CSS
1<span style="display: inline-block;width:100px;height:100px"> 2A</span><!-- これで高さは設定できる --> 3 4<span style="display: inline-block;width:100px;height:100px;display: flex;justify-content: center;align-items: center;"> 5A</span><!-- 高さを設定し、上下中央に置きたいがこれでは動かない --> 6
回答2件
0
何を、どこを基準に上下中央なのかよく分かりませんが、
span要素にインラインの性質を持たせつつ、中のテキストを上下中央にしたいのなら、display:inline-flex;にすればどうでしょうか。
css
1<span style="display:inline-flex;width:100px;height:100px;justify-content: center;align-items: center;"> 2A</span><!-- 高さを設定し、上下中央に置きたいがこれでは動かない -->
下記でも同様のレイアウトになります。（テキストが折り返されると異なりますが。）
css
1<span style="display:inline-block;width:100px;height:100px;line-height:100px;text-align: center;"> 2A</span>
これが希望のレイアウトと違うなら、親要素を含めたHTMLを提示して、どのようなレイアウトにしたいのか詳細に説明してください。
投稿2020/06/01 04:41
編集2020/06/01 04:59
総合スコア34075
0
heightとline-heightを一致させる、という方法はどうでしょうか？
投稿2020/06/01 02:12
総合スコア146018
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。