ホームページ > 記事 > ウェブフロントエンド > HTML5 における垂直方向の中央揃えの解決策

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

小云云オリジナル: 2017-12-22 15:24:5910082ブラウズ

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 における垂直方向の中央揃えの解決策

関連記事