ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS での box-align 属性と box-pack 属性の使用法について話しましょう

CSS での box-align 属性と box-pack 属性の使用法について話しましょう

青灯夜游
リリース: 2021-02-03 11:00:06
転載
2372 人が閲覧しました

CSS での box-align 属性と box-pack 属性の使用法について話しましょう

[推奨チュートリアル: CSS ビデオ チュートリアル ]

CSS の box-align 属性と box-pack 属性を使用して要素を設定できますボックスの位置。

注: 整列する必要がある要素の親要素の dispaly の値は boxである必要があります

box-align 値が center の場合、子要素は垂直方向に中央揃えになります

box-pack 属性 ボックスが子要素のサイズより大きい場合に、子要素を配置する場所を指定します。このプロパティは、水平ボックス内の水平位置と垂直ボックス内の垂直位置を指定します。

水平ボックスの場合、box-pack 値が中央の場合、子要素は水平方向に中央に配置されます。

HTML コード:

<div id="parent1">
    <div id="div1">
        div1
    </div>
</div>
ログイン後にコピー

CSS コード:

 div{
    border: solid black 1px;
}
#parent1{
    width: 100%;
    height: 500px;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: center;
    -moz-box-align: center;
    -moz-box-pack: center;
    -webkit-box-pack: center;
}
ログイン後にコピー

When box - パック値が justify の場合、子要素は分散して整列されます。

HTML コード:

<div id="parent2">
    <div id="div2">
        div2
    </div>
    <div id="div3">
        div3
    </div>
    <div id="div4">
        div4
    </div>
    <div id="5">
        div5
    </div>
    <div id="div6">
        div6
    </div>
</div>
ログイン後にコピー

CSS コード:

 #parent2{
    width: 100%;
    height: 500px;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-align: center;
    -moz-box-align: center;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
}
ログイン後にコピー

効果は次のとおりです。

CSS での box-align 属性と box-pack 属性の使用法について話しましょう

コンピューター プログラミングの詳細については、プログラミング ビデオをご覧ください。 !

以上がCSS での box-align 属性と box-pack 属性の使用法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:csdn.net
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート