中央CSS

CSS の中央揃え: 完全ガイド

Web デザイナーやフロントエンド開発者が Web ページを作成するときに遭遇する最も一般的な問題の 1 つは、要素を中央に配置する方法です。要素には、テキスト、画像、ビデオ、ボタンなどが含まれます。この記事では、CSS を使用してさまざまなタイプの要素を中央揃えにする方法 (水平方向の中央揃え、垂直方向の中央揃え、親要素の中央揃えなど) を説明します。

1. 水平方向の中央揃え

まず、要素を水平方向に中央揃えにする方法について説明します。これは、次の方法で実現できます:

1.1 text- align attribute

要素がブロックレベル要素の場合、text-align 属性を使用してテキストまたはインライン要素を水平方向に中央揃えにすることができます。このプロパティは、ナビゲーション バー、見出し、段落を中央に配置するためによく使用されます。

例:

.container {
   text-align: center;
}

1.2 margin プロパティ

要素を水平方向に中央揃えするもう 1 つの方法は、margin プロパティを使用することです。要素の左右のマージンを自動に設定できます。

例:

.container {
   width: 300px;
   margin: 0 auto;
}

1.3 flexbox レイアウト

Flexbox は、水平および垂直の中央揃えを非常に簡単に実現できる強力な CSS レイアウト モデルです。水平方向の中央揃えには、次の CSS を使用します。

.container {
   display: flex;
   justify-content: center;
}

これにより、コンテナ要素が Flexbox コンテナになり、その子が水平方向に中央揃えになります。

2. 垂直方向の中央揃え

次に、要素を垂直方向の中央揃えにする方法を見てみましょう。これは水平方向の中央揃えよりも少し難しくなりますが、これを実現する方法はいくつかあります。

2.1 行の高さ

場合によっては、行の高さプロパティを使用して、テキストまたはインライン要素を垂直方向に中央揃えにすることができます。

例:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}

span {
    font-size: 24px;
    line-height: 300px;
}

単一行のテキストが垂直方向の中央に配置されるように、行の高さをコンテナの高さと一致するように設定します。

2.2 トランスフォーム属性

トランスフォーム属性は、要素自体を基準にして配置するために使用できます。これをtranslate()に設定し、Y値を50%に設定すると、要素が垂直方向の中央に配置されます。

.container {
    position: relative;
}

img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

2.3 Flexbox レイアウト

固定高さの要素の場合、Flexbox レイアウトを使用して要素を垂直方向の中央に配置できます。要素を垂直方向の中央に配置するには、align-items を center に設定します。

.container {
    display: flex;
    align-items: center;
    height: 300px;
}

3. 親要素内で中央揃えにする

最後に、子要素を親要素内で中央揃えにする方法について説明します。

3.1 絶対配置とマージン属性

子要素を絶対配置に設定し、左右上下のマージンを 0 に設定し、auto キーワードを使用して子要素を作成します。 in 親要素内で中央に配置されます。

.parent {
    position: relative;
    height: 300px;
}

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

もう 1 つの方法は、子要素の左右のマージンを auto に設定することです。この場合、子要素はブロックレベルの要素である必要があります。

.parent {
    height: 300px;
}

.child {
    width: 200px;
    height: 100px;
    margin: 0 auto;
}

3.2 Flexbox レイアウト

Flexbox レイアウトを使用すると、子要素を親要素の中央に配置するのが非常に簡単です。親要素の表示プロパティを flex に設定し、justify-content プロパティと align-items プロパティを使用します。

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

概要

CSS を中央揃えにすることは、美しく使いやすいユーザー インターフェイスを作成するために重要です。この記事では、テキスト、画像、ビデオ、ボタン、親要素の垂直方向、水平方向、中央揃えなど、さまざまな種類の要素を中央揃えにするいくつかの方法を説明しました。適切なセンタリングを使用すると、Web デザインがより良く、より効率的になることに注意してください。

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