CSSの配置方法とは何ですか

方法: 1. 「text-align:center」スタイルを使用して、水平方向の中央揃えを実現します。 2. 「line-height: line height;」スタイルを使用して、垂直方向の中央揃えを実現します。 3. 「align-items:center;justify-content:center」スタイルを使用して、水平方向と垂直方向の中央揃えを実現します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css の配置方法とは何ですか

1. 水平方向の中央揃え

• インライン要素の水平方向のセンタリング

設定した要素がテキストやピクチャなどのインライン要素の場合、親要素に text-align:center を設定して水平方向を実現します。インライン要素の中央揃え、子要素の水平方向の中央揃え。要素の表示が inline-block に設定され、子要素がインライン要素になります

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

• ブロック要素の水平方向の中央揃え (固定) width)

設定される要素が固定幅のブロックレベル要素の場合、text-align: center は機能しません。 「左右のマージン」の値を「自動」に設定することでセンタリングを実現できます。

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

• ブロック要素の水平方向の中央揃え (幅不定)
  

実際の作業では、ブロック要素を " "ブロックする必要がある場合があります。 Web ページのページネーション ナビゲーションなど、「幅が可変のレベル要素」は中央に設定されます。ページネーションの数は不確実であるため、幅を設定することで柔軟性を制限することはできません。

これを実現するには、可変幅のブロックレベル要素に text-align:center を直接設定するか、親要素に text-align:center を追加して中央揃え効果を実現します。

可変幅ブロックレベル要素の幅が1行に満たない場合、表示をインライン型またはインラインブロック(インライン要素表示またはインラインブロック要素に設定)に設定できます。

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
<style>
.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}
</style>

2. 垂直方向のセンタリング

は水平方向のセンタリングと同じです ここでは垂直方向のセンタリングについて説明します まず、親要素がボックス コンテナであることと、親要素がボックス コンテナであることの 2 つの条件を設定します高さが設定されています。

子要素はインライン要素の場合、高さはそのコンテンツによってサポートされます。

この場合、親要素の行の高さをその要素に設定する必要があります。子要素を垂直方向に中央揃えにする高さ

#

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

3. 水平方向と垂直方向の中央揃え##css タグで、表示属性を flex に設定してフレックス レイアウトを実装し、 align-items 属性を center (水平方向の中央揃え) に設定し、justify-content 属性を center (垂直方向の中央揃え) に設定します。水平方向と垂直方向の中央に配置するように設定できます。

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>Document</title>


    <div>
        <span>测试</span>
</div>
<style>
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
</style>

プログラミング関連の知識については、

プログラミング ビデオ

をご覧ください。 ！

以上がCSSの配置方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。