前 単一行のテキストを垂直方向に中央揃えにするには、高さと行の高さを同じ値に設定する必要があると常々思っていましたが、高さを設定する必要はありません。実際、テキスト自体は行の中央に表示されます。高さを設定しない場合、行の高さによって高さが拡張されます。
table-cell 要素 -align:middle により、すべての子要素が垂直方向の中央に配置されます。これはテーブル内のセルの垂直方向の中央揃えに似ています
テーブル構造に変更できます[注] table-cell に設定された p はフローティングまたは使用できません。絶対配置。フローティングまたは絶対配置では、要素がブロック レベルの要素特性を持ち、それによってテーブル セル要素の垂直方向の位置合わせ機能が失われるためです。
フローティングや絶対位置の処理が必要な場合は、外側にもう1層pを置く必要があります。
<style>
.parent{
display: table-cell;
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
<p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>
</p>
【2】子要素が画像の場合、高さの代わりに親要素の行の高さを設定し、親要素のfont-sizeを0に設定します。
vertical-align: middle の説明は、要素の中点が親要素のベースラインに親要素の文字 X の高さの 1/2 を加えた位置に配置されることです。文字 X が em ボックス内で垂直方向の中央に配置されておらず、各フォント内の文字 X の高位置と低位置が一貫していないためです。
そのため、フォントサイズが大きいほど、違いがより明確になります。 font-size が 0 の場合、文字 X のフォント サイズを 0 に設定するのと同じなので、完全な垂直方向のセンタリングを実現できます。
<style>
.parent{
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>
【3】新しい要素を追加して垂直方向のセンタリング効果を実現します
新しい要素の高さを親の高さに設定し、幅を0に設定し、垂直方向のセンタリングのvertical-alignを設定します。 middle インラインブロック要素。 2 つの要素間のスペースは解析されるため、親レベルで font-size:0 を設定し、構造要件が厳密でない場合は、子レベルで font-size を必要な値に設定する必要があります。 2 つの要素が 1 行にある場合は、font-size:0 を設定する必要はありません。
<style>
.parent{
height: 100px;
font-size: 0;
}
.child{
display: inline-block;
font-size: 20px;
vertical-align: middle;
}
.childSbling{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
<p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
<i class="childSbling"></i>
</p>
3つのアイデア: 絶対配置による垂直方向のセンタリング
【1】子要素の高さが可変の場合、translateY(-50%)でtop50%を使用してセンタリング効果を実現します。
移動関数のパーセンテージはそれ自体の高さに相対的なため、top:50% とtranslateY(-50%) を組み合わせることでセンタリング効果を実現できます。
[注意] IE9 ブラウザはサポートしていません。
[注意] 子要素の高さがわかっている場合、translate() 関数を margin-top: 負の高さの値に置き換えることもできます。
<style>
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>【2】子要素の高さが固定されている場合は、絶対配置ボックスモデル属性を組み合わせてセンタリング効果を実現します
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
Align水平方向の中央に、要素の外側のレイヤーに p のレイヤーを配置して絶対値を設定し、要素の負のマージン左または相対負の左属性を設定して、水平方向の中央揃え効果を実現します。ただし、マージンは包含ブロックの幅に相対的なものであるため、margin-top:-50% は高さの -50% ではなく幅を取得するため、包含ブロックの高さである相対パーセンテージ値には現実的ではありません。 is auto この場合、Chrome、safari、および IE8+ ブラウザは要素の上位パーセンテージ値の設定をサポートしていないため、実行できません。
アイデア 4: フレキシブル ボックス モデルのフレックスを使用して垂直方向のセンタリングを実現します
[注] IE9 ブラウザはサポートしません
[1] スケーラブル コンテナの align-items に交差軸の配置を設定します。 center
<style>
.parent{
display: flex;
align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>【2】スケーラブルプロジェクトにマージンを設定: auto 0
<style>
.parent{
display: flex;
}
.child{
margin: auto 0;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>
