CSS--圖片鏈接垂直居中展示的方法

原文網址：CSS--圖片鏈接垂直居中展示的方法-CSDN博客

簡介

本文介紹CSS圖片鏈接垂直居中展示的方法。

圖片鏈接

問題復現

源碼

<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container2"style="width: 400px ; height: 400px ; border: 3px solid black;"><a target="_blank" href="https://baidu.com"><img src=../img/bat.png alt="乒乓球拍"></a>
</div></body></html>

結果

方案1：flex布局

代碼

<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container2" style="width: 400px; height: 400px; border: 3px solid black; display: flex; align-items: center;"><a target="_blank" href="https://baidu.com"><img src="../img/bat.png" alt="乒乓球拍"></a>
</div></body></html>

結果

方案2：絕對定位

代碼

<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container2" style="width: 400px; height: 400px; border: 3px solid black; position: relative;"><a target="_blank" href="https://baidu.com"><img src="../img/bat.png" alt="乒乓球拍" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"></a>
</div></body></html>

結果

元素背景圖

問題復現

代碼

<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title>
</head><body><div class="container1"style="width: 400px ; height: 400px ; border: 3px solid black;
background-image: url(../img/bat.png); background-repeat:no-repeat;"></div></body></html>

結果

解決方案

添加CSS：background-position:center center;

代碼

<html xml:lang="cn" lang="cn"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="keywords" content="anchor,fixed navigation hide anchor"><title></title><style>body {/*display: flex;*/}</style>
</head><body><div class="container1"style="width: 400px ; height: 400px ; text-align: center; border: 3px solid black;
background-image: url(../img/bat.png); background-repeat:no-repeat;background-position:center center;"></div></body></html>

結果

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/80424.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/80424.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/80424.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！