CSS中,可以使用margin: auto;
來(lái)實(shí)現(xiàn)圖片左右居中顯示,具體步驟如下:
1、給圖片元素設(shè)置一個(gè)寬度(width)和高度(height)。
2、將圖片的左右外邊距(margin-left和margin-right)設(shè)置為自動(dòng)(auto)。
3、將圖片放入一個(gè)塊級(jí)元素(如div)中,并設(shè)置該元素的寬度和高度。
示例代碼如下:
<div style="width: 300px; height: 200px; margin: auto;"> <img style="width: 100px; height: 100px; margin: auto;" src="image.jpg" /> </div>
在上面的代碼中,圖片被放置在一個(gè)寬度為300像素、高度為200像素的div元素中,圖片的寬度和高度都設(shè)置為100像素,并且左右外邊距設(shè)置為自動(dòng),這樣,圖片就會(huì)在該div元素中左右居中顯示。
需要注意的是,如果圖片的大小超過(guò)了其所在的塊級(jí)元素的寬度和高度,那么圖片可能會(huì)超出該元素的邊界,在設(shè)置圖片和塊級(jí)元素的寬度和高度時(shí),需要確保圖片的大小不會(huì)超過(guò)塊級(jí)元素的大小。