首頁  >  文章  >  web前端  >  css盒子中的圖如何居中

css盒子中的圖如何居中

青灯夜游
青灯夜游原創
2021-02-23 15:59:2716228瀏覽

居中方法:1、為盒子設定相對定位、圖片設定絕對定位;然後調整圖片位置即可。 2.將img圖片元素設定為區塊級元素;然後利用table-cell、「vertical-align:middle;」來居中。 3.利用flexbox佈局來居中。

css盒子中的圖如何居中

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

css讓圖片在div盒子裡居中

#第一種:用css的position屬性

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div1 {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				position: relative;
			}
			
			img {
				width: 100px;
				height: 100px; 
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>

	<body>

		<div class="div1">
			<img  src="img/1.jpg" / alt="css盒子中的圖如何居中" >
		</div>
	</body>

</html>

效果圖:

css盒子中的圖如何居中

第二個:利用css3的新增屬性table-cell, vertical-align:middle;

css盒子中的圖如何居中

css盒子中的圖如何居中

#

nbsp;html>


	
		<meta>
		<style>
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				display: table-cell;
            	vertical-align: middle;
			}
			
			img {
				width: 100px;
				height: 100px;
				display: block;
				margin: auto;
			}
		</style>
	

	

		<div>
			<img  alt="css盒子中的圖如何居中" >
		</div>
	

效果:

【推薦教學:css盒子中的圖如何居中CSS影片教學

第三種:利用flexbox佈局

###
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				display: flex;
				/*!*flex-direction: column;*!可写可不写*/
				justify-content: center;
				align-items: center;
			}
			
			img {
				width: 100px;
				height: 100px;
				display: block;
				margin: auto;
			}
		</style>
	</head>

	<body>

		<div class="div">
			<img  src="img/1.jpg" / alt="css盒子中的圖如何居中" >
		</div>
	</body>

</html>
###效果:###################第四種:利用transform的屬性(缺點:需要支援Html5)### ###
nbsp;html>


	
		<meta>
		<style>
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				position: relative;
			}
			
			img {
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50%;
				left: 50%;
				-ms-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		</style>
	

	

		<div>
			<img  alt="css盒子中的圖如何居中" >
		</div>
	

###效果圖:###############更多程式相關知識,請造訪:###程式設計影片###! ! ###

以上是css盒子中的圖如何居中的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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