目次
display: flex;の要素の中央寄せ
flexコンテナの要素を中央寄せするときalign-itemsとjustify-contentを使って中央寄せする方法があります。
<div class="xxx">
<p>テキスト</p>
</div>.xxx{
display: flex;
align-items: center;
justify-content: center;
background: #999999;
}テキスト
line-heightの単位
line-hightの値には単位は付けないのが定石です
親要素に単位emを付けた場合
<div class="parents">
<p class="child">テキスト</p>
</div>.parents{
background: #999999;
font-size: 16px;
line-height: 1em;
text-align: center;
}
.child{
font-size: 32px;
}見た目
テキスト
テキストが背景からはみ出してしまいます
親要素に単位を付けない場合
<div class="parents">
<p class="child">テキスト</p>
</div>.parents{
background: #999999;
font-size: 16px;
line-height: 1;
text-align: center;
}
.child{
font-size: 32px;
}見た目
テキスト
テキストが背景に収まります
<div class="parents">
<p class="child">テキスト</p>
</div>.parents{
font-size: 16px;
line-height: 1em;
}
.child{
font-size: 32px;
}
コメント