HTML5 における垂直方向の中央揃えの解決策

CSS では、margin: 0 auto; を使用すると水平方向の中央揃えが実現できますが、margin: auto 0 では垂直方向の中央揃えが実現できません。この記事では、HTML5 における垂直方向のセンタリングの詳細な解決策を主に紹介します。編集者はそれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

ここでの主な理由は、親コントロール、つまりコントロール自体が正しく配置されていないことです。コードを直接見ると、まず親コントロールに相対レイアウトを使用し、次に子コントロールに絶対レイアウトを使用し、top 属性とbottom 属性を margin: auto 0; と組み合わせて使用​​して、効果。

.container-vertical {
      position: relative;
      width: 100%;
      height: 200px;
      background: deepskyblue;
      margin-bottom: 20px;
}
        
.container-vertical-item {
    position: absolute;
    width: 130px;
    height: 80px;
    text-align: center;
            background: yellow;
        line-height: 80px;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

垂直方向に中央揃え.png

水平方向と垂直方向に中央揃え

5.2の経験を活かして、サブコントロールの左、右、上、下のプロパティを次のように設定してみることができます。 0. マージン: 自動; 4 方向すべてに自動マージンがあります。このような効果が得られます。注意が必要なサブコントロールには、display: block 属性が必要です。

コードを見てください

 .container-horization-vertical {
    position: relative;
    width: 100%;
    height: 200px;
    background: deepskyblue;
    margin-bottom: 20px;
}
        
.container-horization-vertical-item {
    position: absolute;
    width: 150px;
    height: 80px;
    background: yellow;
    line-height: 80px;
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

概要: このソリューションは、それほど複雑ではないページ レイアウトを解決する場合には依然として非常に優れており、あらゆるインターフェイスとほぼすべてのブラウザーに適応できます。ただし、非常に複雑なページの場合は、他のソリューションが必要になる場合がありますが、このアイデアからインスピレーションを得ることもできます。

関連する推奨事項:

モバイル HTML5 で水平画面と垂直画面を判断する方法

html5 の位置についての深い理解

HTML5 で知っておくべき 10 の事柄

以上がHTML5 における垂直方向の中央揃えの解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。