在css中設置圖片居中的方法:1.使用background-position屬性設置圖片居中;2.使用text-align屬性設置圖片居中;
在css中設置圖片居中的方法
1.使用background-position屬性設置圖片居中
頁面布局:
<body><div class="demo"></div>
</body>
css樣式:
.demo{width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
background-image:url(1.jpg) ;
background-size:200px 160px ;
background-position:50% 50% ; /* 設置圖片居中 */
background-repeat:no-repeat ;
}
2.使用text-align屬性設置圖片居中
頁面布局:
<body><div class="content">
<img src="images/1.jpg" />
</div>
</body>
css樣式:
.content{width:400px;
height:300px;
text-align:center; /* 設置圖片居中 */
}