简介
本文介绍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：img指定margin
给img元素添加margin，左右两侧自动，并指定display为block。
代码
<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 style="margin: 0 auto; display: block" alt="乒乓球拍">
</a>
</div>
</body>
</html>结果
方案2：父元素指定text-align
将父元素设置为：text-align: 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>
</head>
<body>
<div class="container2"
style="width: 400px ; height: 400px ; text-align: center; border: 3px solid black;">
<a target="_blank" href="https://baidu.com">
<img src=../img/bat.png alt="乒乓球拍">
</a>
</div>
</body>
</html>结果
方案3：img绝对定位
代码
<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>结果
