div 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。-htmlチュートリアル-php.cn

div 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。

烟雨青岚

リリース： 2020-07-01 11:35:22

転載

2710 人が閲覧しました

div 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。

div 内の画像がどのように水平方向と垂直方向に中央揃えされるのかを知らないといけません。ここでは、エディターには 5 つの中央揃え方法が用意されています。見てみましょう。

本文構造

	<p>
		<img  alt="div 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。" >
	</p>

ログイン後にコピー

方法 1:
表示を表セルに設定し、水平方向の中央揃えの場合は text-align を center に設定し、垂直方向の場合はvertical-align を中央に設定します。センタリングです。

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

ログイン後にコピー

結果は次の図に示されています。
div 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。

方法 2:
位置位置決めによって達成されます。 pを相対配置、imgを絶対配置absolute、左:50%、上:50%に設定すると、画像の左上隅がpの中心に位置します。画像が p の中央にある場合、画像を画像の高さの半分だけ上に、画像の幅の半分だけ左に移動する必要があります。

<style>
	*{margin: 0;padding:0;}
	p{
		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>

ログイン後にコピー

結果は以下のようになります:
div 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。

方法 3: 画像または要素の実際の幅と高さが不明瞭な場合に使用できます
これはやはり位置の測位によって実現されます。 pを相対配置、imgを絶対配置absolute、left:50%、top:50%に設定すると、画像の左上隅がpの中心に位置します。 p の中央で、画像を移動する必要があります。画像の高さの半分を上に、画像の幅の半分を左に移動します。要素の幅と高さがわからない場合は、transform:translate( を使用できます。 -50%,-50%);

<style>
    *{margin: 0;padding:0;}
    p{
        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>
    *{margin: 0;padding:0;}
    p{
        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>
    *{margin: 0;padding:0;}
    p{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

ログイン後にコピー

効果は同じです, みなさんのお役に立てれば幸いです！

この記事は、https://blog.csdn.net/DreamFJ/article/details/68921957

から転載されたものです。推奨チュートリアル: 「HTML チュートリアル」

以上がdiv 内の画像がどのように水平方向と垂直方向の中央に配置されるのかを知らない必要があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。