CSSで画像を中央に配置する方法は何ですか

CSS 画像を中央に配置する方法: 1. "text-align: center;" スタイルを使用する; 2. "margin: 0 auto;" スタイルを使用する; 3. フレキシブル ボックス レイアウトを使用する; 4. グリッドを使用するレイアウト ; 5. 絶対位置を使用して位置を揃えます; 6. 背景属性を使用して背景画像を中央に配置します。

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

html

 <div id="pic">
        <img src=star.jpg class="logo">
 </div>

1. (最も単純な) テキスト属性の配置 text-align

text-align 制御要素 中国語この行の配置。 img に親 div を設定して、img を div のテキストにし、text-align を使用して div 属性を変更できます。 (親要素に属性を追加します)

注: 子要素は inline または inline-block である必要があります。子要素も div である場合は、display: inline/ を設定する必要があります。子要素の inline-block 。ここでの子要素 ​​img はインラインであるため、この手順は省略されます。 このメソッドはインライン要素に適しています。たとえば、img は中央に配置されます

css

#pic {
    text-align: center;   /*表示div的子元素居中*/
}

2. margin を使用します

css

img {
    display: block;    
    width: 100px;
    margin: 0 auto;
}

以上の3点が必須です。

margin: 0 auto; をセンタリングするための

前提条件は次のとおりです:

• インライン要素は、display: block に設定する必要があります。img は、次のように設定する必要があります。インライン要素を設定します。入力されている場合は設定する必要はありません。

• ボタンや入力など、幅が組み込まれている要素を除き、要素には幅が必要です。

前提によれば、親要素の属性を変更するという別の方法もあります。

#pic {
    width: 100px;
    margin: 0 auto;
}    /*父元素div属于block，所以不用再设 display: block;*/

要約すると、この方法はブロック要素に適しています。たとえば、div と input のセンタリング

マージンの制限: 2 つの画像を 1 行に表示する場合、マージンをそれに応じて変更する必要があります。

3. フレキシブル ボックス レイアウト

css

#pic {
    display: flex;   
    justify-content: center;
    }

フレキシブル ボックス レイアウトでは、数行の CSS を使用して、ほぼすべてのレイアウトを実現できます。そして最も驚くべきことは、画像のレイアウトや位置を考慮することなく、n 枚の画像の上 2 行を中央に配置できることです。

4. グリッド レイアウト

フレキシブル ボックスは、ナビゲーション バーで最も一般的に使用されます。対照的に、グリッド レイアウトはユニバーサル レイアウト システムです。

#pic {
    display: grid;   
    align-items: center;     /*块级方向（纵向）上的全部栅格元素居中对齐*/
    justify-items: center;  /*行内方向（横向）所有的元素中线对齐*/
}

したがって、複数の画像を整列させる問題に対処するのに非常に便利です。

5. 絶対位置での配置

css

#pic {
    position: relative;   /*设置绝对定位元素（img）的容纳块，如果不设置，那么容纳块默认为body*/
}
.logo {
    position: absolute;   
    right: 1em; left: 1em;     //表示左右距离相等
    margin: 0 auto;         //与方法二相似
}

方法 2 との最大の違いは、マージンがブロック要素に対して使用されることです。ポジションを使用する場合は、ブロックを設定する必要はありません。しかし、位置というのはフレームレイアウトで使うのが一般的で、単に画像を中央に配置するだけだとやりすぎで面倒です。お勧めしません。

6. 背景画像は中央に配置されます

#html

dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68

css

div {
    height: 1000px;  /*高度非常重要*/
    background: url(star.jpg) no-repeat top center; 
}

前提: 要素の内容が存在する限りが空の場合は、高さを設定する必要があります。 div コンテンツは空であるため、高さを設定する必要があります。そうしないと、div にスペースがなくなり、背景画像が表示されなくなります。ボディであれば、ボディには高さがあるので必要ありません。

背景画像として設定する場合の制限は、ハイパーリンク、タイトル、alt などの画像の属性を設定できないことです。背景画像でない場合は、この形式を使用しないようにしてください。

(学習ビデオ共有: css ビデオ チュートリアル

)###

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