画像の CSS div センタリングコードの書き方-フロントエンドQ&A-php.cn

画像の CSS div センタリングコードの書き方

藏色散人

リリース： 2023-01-04 09:38:31

オリジナル

2948 人が閲覧しました

画像 CSS div センタリングコードの書き方: 最初に表示を table-cell に設定し、次に水平方向のセンタリングを text-align to center に設定し、最後に垂直方向のセンタリングをvertical-align to middleに設定します。

画像の CSS div センタリングコードの書き方

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

推奨: "css ビデオチュートリアル "

本文構造

<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>

ログイン後にコピー

方法 1:

表示を table-cell に設定します。次に、水平方向の中央揃えの場合は text-align を center に設定し、垂直方向の中央揃えの場合はvertical-align を middle に設定します。

<style type="text/css">
*{margin: 0;padding: 0;}
    div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
        width: 50px;
  height: 50px;
}
</style>

ログイン後にコピー

結果は次の図に示されています。

画像の CSS div センタリングコードの書き方

方法 2:

位置測位によって達成されます。 divを相対配置、imgを絶対配置、左:50%、上:50%に設定すると、画像の左上がdivの中心に位置します。画像が div の中央にある場合は、画像を移動する必要があります。画像の高さの半分を上に、幅の半分を左に移動します。

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
left: 50%;
  margin-top: -25px; /* 高度的一半 */
  margin-left: -25px; /* 宽度的一半 */
}
</style>

ログイン後にコピー

結果は以下のようになります。

画像の CSS div センタリングコードの書き方

方法 3: 画像または要素の実際の幅と高さが不明瞭な場合に使用できます

これは、やはり位置の測位によって実現されます。 divを相対配置、imgを絶対配置、左:50%、上:50%に設定すると、画像の左上がdivの中心に位置します。画像が div の中央にある場合は、画像を移動する必要があります。画像の高さの半分を上に、画像の幅の半分を左に移動します。要素の幅と高さがわからない場合は、次のコマンドを使用できます。変換:translate(-50%,-50%);

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

ログイン後にコピー

方法 4:

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

ログイン後にコピー

方法 5:柔軟なレイアウト flex

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

ログイン後にコピー

効果は同じです。皆さんのお役に立てれば幸いです!

以上が画像の CSS div センタリングコードの書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。