一般的に使用されるいくつかの CSS センタリング方法

CSS センタリング手法は、Web ページ制作における非常に基本的な技術の 1 つです。テキストでも画像でも、単純な CSS コードで中央揃えを実現できます。以下に、一般的に使用される CSS の中央揃え方法をいくつか紹介します。

1. div を中央揃えにする

div を中央揃えにするには、次の CSS コードを使用できます:

div {
    width: 200px;
    height: 100px;
    margin: auto;
}

そのうち、width と height 属性は、div の幅と高さを表します。 margin:auto 属性は、div を水平方向と垂直方向の中央に配置できます。

2. 画像を中央に配置する

画像を中央に配置するには、次の CSS コードを使用できます:

img {
    display: block;
    margin: auto;
}

その中の display:block 属性画像を自動的に折り返して中央に配置することができます。 margin:auto 属性は、画像を水平方向および垂直方向の中央に配置できます。

3. テキスト ボックスを中央に配置する

テキスト ボックスを中央に配置するには、次の CSS コードを使用できます:

input[type=text] {
    display: block;
    margin: 0 auto;
}

その中で、input[type=text ] はテキスト ボックスを表し、display:block 属性を使用すると、テキスト ボックスを自動的に折り返して中央に配置できます。 margin:0 autoこの属性は、デフォルトでテキスト ボックスを水平方向および垂直方向の中央に配置できます。

4. Web ページ全体を中央に配置する

Web ページ全体を中央に配置するには、次の CSS コードを使用できます:

body {
    margin: 0 auto;
    text-align: center;
}

そのうちの margin:0 auto 属性は Web コンテンツを水平方向に中央に配置でき、text-align:center 属性は Web コンテンツを垂直方向に中央に配置できます。

5. 絶対位置の要素を中央に配置する

絶対位置の要素を中央に配置するには、次の CSS コードを使用できます:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

その中で、position: Absolute 属性は親要素内に要素を配置でき、top:50% 属性と left:50% 属性は要素を上下左右の中央に配置できます。親要素を基準とした相対値。 transform:translate(-50%,-50%)この属性は、要素の位置をその幅と高さの半分だけ左上に移動して、要素が完全に中央に配置されるようにすることができます。

要約すると、上記の方法は一般的に使用される CSS センタリング方法ですが、実際のアプリケーションでは、特定の状況に応じて対応するセンタリング方法を選択する必要があります。

以上が一般的に使用されるいくつかの CSS センタリング方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。