溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css實現(xiàn)網(wǎng)站上圖片上下居中顯示

發(fā)布時間：2020-07-06 13:46:45 來源：網(wǎng)絡(luò) 閱讀：290 作者：愛著你的愛 欄目：開發(fā)技術(shù)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
    
    body,div,span{margin:0; padding:0;}
    
    /*第一種解決辦法(建議使用這個，兼容性更好)*/
    
    #aaa{height:400px; width:400px; background:#CFC; text-align:center;}
    #img2{ height:100%;border:0; width:0; display:inline-block;}
    #aaa img{ vertical-align:middle; max-width:400px; max-height:400px;margin-left:-2px;border:0;}
    
    
    /*第二種解決辦法*/
    
    #bbb{height:400px; width:400px; background:green;margin-top:20px; text-align:center; }
    #bbb span{ height:51.5%;width:0;border:0; display:inline-block;}
    #bbb img{ vertical-align:middle; max-width:400px; max-height:400px;margin-left:-4px;border:0;}
    
    
    /*第三種解決辦法*/
    
    #ccc{height:400px; width:400px; background:orange;margin-top:20px; text-align:center; }
    #ccc i{ height:100%;width:0;border:0; display:inline-block; vertical-align:middle;}
    #ccc img{ vertical-align:middle; max-width:400px; max-height:400px;margin-left:-4px;border:0;}
    
    
</style>
</head>

<body>

<!--第1種解決辦法-->
<div id="aaa">
    <img id="img2" />
    <a href="">
        <img src="2.jpg" />
    </a>
</div>

<!--第2種解決辦法-->
<div id="bbb">
    <span></span>
    <a href="">
        <img src="2.jpg" />
    </a>
</div>

<!--第3種解決辦法-->
<div id="ccc">
    <i></i>
    <a href="">
        <img src="2.jpg" />
    </a>
</div>

其他復(fù)雜方法參考網(wǎng)站：http://bbs.blueidea.com/thread-2666987-1-1.html

</body>
</html>

附件：http://down.51cto.com/data/2367866
向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手