您好,登錄后才能下訂單哦!
這篇“css如何設(shè)置圖片位置居中”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“css如何設(shè)置圖片位置居中”,給大家總結(jié)了以下內(nèi)容,具有一定借鑒價(jià)值,內(nèi)容詳細(xì)步驟清晰,細(xì)節(jié)處理妥當(dāng),希望大家通過(guò)這篇文章有所收獲,下面讓我們一起來(lái)看看具體內(nèi)容吧。
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
css設(shè)置圖片位置居中的方法:可以在圖片外面添加一個(gè)p標(biāo)簽,然后通過(guò)設(shè)置line-height屬性使圖片位置居中,如【<p><img src=""></p> line-height:300px;】。
具體方法如下:
1、利用display:table-cell,具體代碼如下:
html代碼如下:
<div class="img_wrap"> <img src="wgs.jpg"> </div>
css代碼如下:
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; display: table-cell; //主要是這個(gè)屬性 vertical-align: middle; text-align: center; }
效果如下:
2、采用背景法:
html代碼如下:
<div class="img_wrap"></div>
css代碼如下:
.img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; background: url(wgs.jpg) no-repeat center center; }
效果如下圖:
(學(xué)習(xí)視頻分享:css視頻教程)
3、圖片外面用個(gè)p標(biāo)簽,通過(guò)設(shè)置line-height使圖片垂直居中:
html代碼如下:
<div class="img_wrap"> <p><img src="wgs.jpg"></p> </div>
css代碼如下:
*{margin: 0px;padding: 0px} .img_wrap{ width: 400px; height: 300px; border: 1px dashed #ccc; text-align: center;} .img_wrap p{ width:400px; height:300px; line-height:300px; /* 行高等于高度 */ } .img_wrap p img{ *margin-top:expression((400 - this.height )/2); /* CSS表達(dá)式用來(lái)兼容IE6/IE7 */ vertical-align:middle; border:1px solid #ccc; }
效果圖如下:
感謝你的閱讀,希望你對(duì)“css如何設(shè)置圖片位置居中”這一關(guān)鍵問(wèn)題有了一定的理解,具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過(guò)才能領(lǐng)會(huì),快去試試吧,如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(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)容。