CSSを使用してdiv内の画像を垂直方向に中央揃えにする方法

この記事では、CSS を使用して div 内の画像を垂直方向に中央揃えする方法を主に紹介します。これは、一定の参考価値があり、

私たちが普段ページを作成しているすべての人に役立つことを願っています。 div の中央に画像を表示するように求められるが、その方法がわからないという状況によく遭遇します。今日は、div 内の画像を垂直方向に中央揃えするためによく使用される CSS コードをいくつか紹介します

#。 ##HTML コード

<div>
	<img src="images/1.jpg">
</div>

#方法 1位置とマージンを使用して実現します。

絶対値を設定して子要素を許可します。親要素に対するpositioning属性 divに相対的なpositioning

relativeは、位置決めのために元の位置を保持し、その元の位置を基準にして位置決めすることを意味します

absoluteは、元の位置から離れて相対的に配置することを意味します最も近くに配置された親 配置された親要素がない場合は、ドキュメントを基準にして配置されます

注:

子要素の上下左右を 0 にするには、次のようにします。 set margin:auto 自動的に垂直方向の中央に配置されます。#コードは次のとおりです。#

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;//父元素设置绝对定位
}
img{
    position: absolute;//相对定位
	width:80px;
	height:50px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;//使其垂直居中
	}

##レンダリング

方法 2

display の 3 つの属性を使用して、

display:table を実現します。 -cell: 表のセルとして使用されます。表示 (b6c5a531a458a2e790c1fd6421739d1c および b4d429308760b6c2d20d6300079ed38e と同様)vertical-align: middle;垂直方向の配置を設定します。行レベルの要素に適用されます

text-align: center: 水平方向の配置を設定します。このプロパティは、ライン ボックスの配置位置を指定することによって、ブロック レベル要素内のテキストの水平方向の配置を設定します。

div{
        width:200px;
        height: 200px;
        margin:300px auto;
        display: table-cell;//作为一个表格单元格显示
        vertical-align: middle;//设置垂直对齐方式
        text-align: center;//设置水平对其方式
        border:1px solid #ccc;
    }
     img {
        width:80px;
        height:50px;
    }

レンダリング

方法 3

位置とマージンを使用する - 実装top と margin-left の値

このメソッドでは、margin-top と margin-left の値の設定に注意を払う必要があります。これらは要素の高さと幅の半分に設定する必要があります。両方とも負の値である必要がありますたとえば、margin-top: -40px は要素が上部境界から 40 ピクセル上にあることを意味し、margin-top: 40px は要素が上部境界要素から 40 ピクセル下にあることを意味します

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;
}
img{
	position: absolute;
	width:80px;
	height: 50px;
	top:50%;
	left:50%;
	margin-top: -40px;//向上40px
	margin-left: -25px;//向左25px

}

レンダリング

##要約: CSS を使用して div 内の画像を垂直方向の中央に配置する方法はたくさんあります。上記は私が持っている 3 つの方法です。この記事が皆さんのページ レイアウトの学習に役立つことを願っています。

#

以上がCSSを使用してdiv内の画像を垂直方向に中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。