html圖片中圖片怎麼居中對齊？
- 青灯夜游原創
- 2020-04-21 14:34:4321495瀏覽
html中圖片怎麼居中對齊？下面這篇文章跟大家介紹一下。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
圖片的居中方式有很多種吧，算是html基礎，以下跟大家介紹幾種方法。
<!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" style="max-width:90%" / alt="html圖片中圖片怎麼居中對齊？" >
</div>
</body>
</html>以上程式碼的效果圖：
#方法1：
img{
position: relative;
left: 50%;
top: 50%;
margin: -60px 0 0 -75px;
}給img標籤設定position定位，position:relative，left：50%；top：50%分別指將改元素向右移動一半父容器寬度的距離以及向下移動一半父容器高度的距離，由於移動的距離是以父容器為標準的一半高度寬度距離，效果如下：
因為這張圖片較大，所以超出了div的範圍。 。 。
之後要將img往回移動，才能使img元素居中顯示，margin: -60px 0 0 -75px;指的是將img元素向左移動75px，向上移動60px（因為用的圖片素材的寬高為150*120），這樣便能使得圖片居中了。
方法2：
img{
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}其實這裡跟上面的方法是類似的，但是個人覺得這種比較實用，因為方法一有個麻煩的地方，就是margin值必須跟著img元素的大小變化，如果說img元素都是一樣的大小倒無所謂，但是這種要求未免有些高。
這種做法是用的2d轉換，transform：translate（x軸移動的數值，y軸移動的值），這個方法的好處便在於不用去測量img元素的寬高，直接設定百分比，在transform：translate（）中，使用的百分比其實是相對於元素自身寬高的。
方法3：
設定為兩層父容器，第一層設定display：table，將第一級父容器轉換成表格類型，
之後在第二級，也就是img的上一層父容器設定display：table-cell，
在第一級父容器中設定text-align：center，
第二層設定vertical-align: middle，便可以達到將圖片置中的目的
方法4：
設定主側軸對齊方式
<div class="a"> <img src="img/MEIZU.png" alt="html圖片中圖片怎麼居中對齊？" > </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;
}給父容器設定display：flex，將父容器轉換成伸縮盒子，因為應用主側軸對齊方式就需要這樣。 。 。 。
之後再設定主軸對齊方式為 justify-content: space-around;
注意: Internet Explorer 10 及更早版本瀏覽器不支援 justify-content 屬性。
注意: Safari 6.1 及更新版本透過 -webkit-justify-content 屬性支援此屬性。
接著設定父容器的側軸對齊方式，align-items: center;
#注意: Internet Explorer 10 及更早版本瀏覽器不支援 align-items 屬性。
注意: Safari 7.0 及更新版本透過 -webkit-align-items 屬性支援此屬性。
看啥呢，圖片這樣就已經居中了啊。
如果不是因為Internet Explorer 10 及更早版本瀏覽器不支持，其實這個方法算是最適合的吧。
推薦教學：html教學
以上是html圖片中圖片怎麼居中對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！