首頁 >web前端 >前端問答 >css中img不知道寬高怎麼實現居中

css中img不知道寬高怎麼實現居中

青灯夜游原創: 2022-09-22 17:28:222243瀏覽

3種方法：1.利用text-align屬性，為包含img的父元素設定「text-align: center;」即可。 2.利用彈性盒佈局，為父元素設定「display: flex;justify-content: center;」即可。 3.利用柵格佈局，為父元素設定「display:grid;align-items:center;justify-items:center;」即可。

css中img不知道寬高怎麼實現居中

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

方法1：利用文字對齊屬性text-align

text-align控制元素中文字行的對齊方式。可以為img設一個父輩的div，這樣img就可以是div的文本，然後用text-align修改div屬性。（在父輩元素中新增屬性）

注意：子元素必須是inline或inline-block；如果子元素也是div的話，需要給子元素設定display：inline/inline-block. 這裡子元素img是inline所以省略這一步。 此方法適用於inline元素上，例如img的居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#pic {
				border: 1px solid red;
			    text-align: center;   /*表示div的子元素居中*/
			}
		</style>
	</head>

	<body>

		 <div id="pic">
		        <img  src="img/2.jpg" class="logo" alt="css中img不知道寬高怎麼實現居中" >
		 </div>

	</body>
</html>

css中img不知道寬高怎麼實現居中

方法2：利用彈性盒佈局

css

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

css中img不知道寬高怎麼實現居中

彈性盒佈局可以使用少數幾行css實現幾乎所有的佈局。而且最神的是，即使是n個圖片上面兩行都可以實現居中，而不必考慮圖片佈局和位置。

方法3：利用柵欄佈局

彈性盒用在導覽列是最普遍的。與之相比，柵格佈局是普適的佈局系統。

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

css中img不知道寬高怎麼實現居中

所以能夠非常方便的處理多張圖片對齊的問題。

（學習影片分享：web前端）

以上是css中img不知道寬高怎麼實現居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css在web中的作用是什麼下一篇：css在web中的作用是什麼

看更多