怎麼使用CSS讓圖片水平垂直都居中?
來源:酷知科普網 2.02W
CSS是層疊樣式表。下面,我們來看看怎麼使用CSS讓圖片水平垂直都居中吧。
操作方法
新建一張文件
在桌面新建一張文字文件,改名為,如下圖所示:
基礎程式碼
然後開啟文字文件,編寫基礎程式碼,再把桌面上的老虎圖片引入進去,如下圖所示:
字尾名
然後把文字文件字尾名改為,如下圖所示:
執行網頁
然後在瀏覽器中執行網頁,現在圖片有了,只是還沒有居中,圖片居住程式碼要用CSS寫,如下圖所示:
CSS程式碼
然後寫上CSS程式碼,如下圖所示:
垂直水平居中
可以看到圖片已經垂直和水平居中,如下圖所示:
總程式碼
<!DOCTYPE html>
<head>
<title>html</title>
<style type="text/css">
iger{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<img class="picTiger" src="C:/Users/Administrator/Desktop/1.png">
</body>
<html>