CSSの配置方法とは何ですか-CSSチュートリアル-php.cn

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

WBOY

リリース： 2021-11-18 14:30:29

オリジナル

7798 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 (垂直方向の中央揃え) に設定します。水平方向と垂直方向の中央に配置するように設定できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv">
        <span>测试</span>
</div>
<style type="text/css">
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
</style>
</body>
</html>

ログイン後にコピー

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

プログラミングビデオ

をご覧ください。！

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