溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html中圖片居中怎么設(shè)置

發(fā)布時(shí)間：2020-04-22 15:16:03 來源：億速云 閱讀：562 作者：小新 欄目：web開發(fā)

今天小編給大家分享的是html中圖片居中怎么設(shè)置，相信很多人都不太了解，為了讓大家更加了解html中圖片居中怎么設(shè)置，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

html中圖片居中怎么設(shè)置

圖片的居中方式有很多種吧，算是html基礎(chǔ)，下面給大家介紹幾種方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 3px solid skyblue;
		}
		</style>
	</head>
	<body>
		<div>
			<img src="1.jpg" width="150px" />
		</div>
	</body>
</html>

以上代碼的效果圖：

html中圖片居中怎么設(shè)置

方法1：

img{
	position: relative;
	left: 50%;
	top: 50%;
	margin: -60px 0 0 -75px;
}

給img標(biāo)簽設(shè)置position定位，position:relative，left：50%；top：50%分別指將改元素向右移動(dòng)一半父容器寬度的距離以及向下移動(dòng)一半父容器高度的距離，由于移動(dòng)的距離是以父容器為標(biāo)準(zhǔn)的一半高度寬度距離，效果如下：

html中圖片居中怎么設(shè)置

因?yàn)檫@張圖片較大，所以超出了div的范圍。。。

之后要將 img往回移動(dòng)，才能使img元素居中顯示，margin: -60px 0 0 -75px;指的是將img元素向左移動(dòng)75px，向上移動(dòng)60px（因?yàn)橛玫膱D片素材的寬高為150*120），這樣便能使得圖片居中了。

html中圖片居中怎么設(shè)置

方法2：

img{
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

其實(shí)這里跟上面的方法是類似的，但是個(gè)人覺得這種比較實(shí)用，因?yàn)榉椒ㄒ挥袀€(gè)麻煩的地方，就是margin值必須跟著img元素的大小變化，如果說img元素都是一樣的大小倒無所謂，但是這種要求未免有些高。

這種做法是用的2d轉(zhuǎn)換，transform：translate（x軸移動(dòng)的數(shù)值，y軸移動(dòng)的值），這個(gè)方法的好處便在于不用去測(cè)量img元素的寬高，直接設(shè)置百分比，在transform：translate（）中，使用的百分比其實(shí)是相對(duì)于元素自身寬高的。

方法3：

設(shè)置為兩級(jí)父容器，第一級(jí)設(shè)置display：table，將第一級(jí)父容器轉(zhuǎn)換成表格類型，

之后在第二級(jí)，也就是img的上一級(jí)父容器設(shè)置display：table-cell，

在第一級(jí)父容器中設(shè)置text-align：center，

第二級(jí)設(shè)置vertical-align: middle，便可以達(dá)到將圖片居中的目的

方法4：

設(shè)置主側(cè)軸對(duì)齊方式

<div class="a">
	<img src="img/MEIZU.png" >
</div>
div.a{
	width: 600px;
	height: 200px;
	border: 1px solid saddlebrown;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
div.a img{
	border: 1px solid red;
}

給父容器設(shè)置display：flex，將父容器轉(zhuǎn)換成伸縮盒子，因?yàn)閼?yīng)用主側(cè)軸對(duì)齊方式就需要這樣。。。。

之后再設(shè)置主軸對(duì)齊方式為 justify-content: space-around;

注意: Internet Explorer 10 及更早版本瀏覽器不支持 justify-content 屬性。

注意: Safari 6.1 及更新版本通過 -webkit-justify-content 屬性支持該屬性。

接著設(shè)置父容器的側(cè)軸對(duì)齊方式，align-items: center;

注意: Internet Explorer 10 及更早版本瀏覽器不支持 align-items 屬性。

注意: Safari 7.0 及更新版本通過 -webkit-align-items 屬性支持該屬性。

看啥呢，圖片這樣就已經(jīng)居中了啊。

如果不是因?yàn)镮nternet Explorer 10 及更早版本瀏覽器不支持，其實(shí)這個(gè)方法算是最合適的吧。

關(guān)于html中圖片居中怎么設(shè)置就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過小編可以保證其準(zhǔn)確性是絕對(duì)沒問題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手