首頁 >web前端 >css教學 >css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)

css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)

青灯夜游
青灯夜游原創
2018-10-19 11:10:4170753瀏覽

在我們開發前端頁面的時候,為了讓頁面效果美觀,會讓圖片呈現居中效果。那麼css怎麼讓img圖片居中顯示呢?本篇文章帶給大家css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例),讓大家可以了解並掌握css的display屬性設定img圖片居中的兩種方法。有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

首先我們來了解一下display屬性實作圖片居中的兩種方法是什麼?

1、利用display的table-cell屬性值,再配合text-align: center;vertical-align: middle;設定圖片居中

2、設定display: flex;,利用彈性佈局flex來設定img圖片的居中

下面我們透過簡單的程式碼範例,詳細了解這兩種方法是怎麼實現圖片居中的。

1、利用display:table-cell來實現img標籤圖片的水平和垂直居中 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			.demo{
				width: 400px;
		        height: 300px;
		        border: 1px dashed #000;
		        display: table-cell; /*主要是这个属性*/
		        vertical-align: middle;
		        text-align: center;
			}
			.demo img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)" / alt="css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)" >
		</div>
	</body>
</html>

效果圖:

css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)

說明:

在demo盒子中設定display: table-cell;會讓demo盒子作為一個表格單元格顯示(類似

和 ),在設定text -align: center;就會讓img圖片水平居中,設定vertical-align: middle;讓img圖片垂直居中。

2、彈性佈局flex

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>img图片居中</title>
		<style>
			*{margin: 0;padding:0;}
			.demo{
				width: 400px;
		        height: 300px;
		        margin: 50px auto;
		        border: 1px dashed #000;
		        display: flex;
		        justify-content: center;
		        align-items: center;
			}
			.demo img{
				width: 200px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<img  src="css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)" / alt="css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)" >
		</div>
	</body>
</html>

效果圖:

css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)

說明:

設定display: flex;實現flex彈性佈局,在設定justify-content: center;讓圖片水平居中對齊,設定align-items: center;讓圖片垂直居中對齊。

總結:以上就是css的display屬性實現圖片居中兩種方法的全部介紹,希望能對大家的學習有所幫助。更多相關教學請訪問 CSS3影片教學Html5影片教學bootstrap影片教學

以上是css如何讓img圖片居中? css的display屬性實作圖片居中(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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