CSS ファイルの画像を中央に配置する方法-CSSチュートリアル-php.cn

CSS ファイルの画像を中央に配置する方法

藏色散人

リリース： 2021-02-18 08:57:06

オリジナル

4119 人が閲覧しました

CSS ファイル内で画像を中央に配置する方法: 最初に HTML サンプルファイルを作成し、次に背景画像を導入し、最後に CSS の「background-position」属性を使用して画像を中央に配置します。

CSS ファイルの画像を中央に配置する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター。

背景画像を中央に配置する CSS メソッド

これは実際には非常に簡単で、CSS のbackground-position プロパティを使用すると、背景画像の水平方向と垂直方向の中央揃えを実現できます。以下に、簡単なコード例を使用して、background-position 属性が背景画像を中央に配置する方法を紹介します。

最初に、background 属性を使用して背景画像を表示します:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景图片居中</title>
        <style>
            *{margin: 0;padding:0;}
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
                border: 1px dashed #000;
                background-image:url(1.jpg) ;
                background-size:200px 160px ;
                background-repeat:no-repeat ;
            }
        </style>
    </head>
    <body>
        <div class="demo">
         
        </div>
    </body>
</html>

ログイン後にコピー

レンダリング:

CSS ファイルの画像を中央に配置する方法

推奨事項: "css videoチュートリアル》

次に、background-position 属性を設定する方法を見てみましょう:

1. Background-position は、ピクセルを使用して背景画像を中央に設定します (

例では、背景画像の右下隅がデモボックスの中心と一致していますが、背景画像を中央に配置したい場合は、背景画像の中心をデモボックスの中心にする必要があります。背景画像はデモボックスの中心と一致します。背景画像を高さの半分だけ右下に移動する必要があります。幅の半分を移動します。したがって、次のコードを CSS に追加すると、背景画像を中央に配置できます

background-position: 100px 70px; /*幅の半分、高さの半分*/

Rendering:

CSS ファイルの画像を中央に配置する方法