<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片居中问题</title>
<style>
*{
margin:0;
padding:0;
}
a{
display:inline-block;
width:250px;
height:250px;
background:blue;
text-align:center;
}
img{
vertical-align:middle;
}
span{
display:inline-block;
width:0;
height:100%;
vertical-align:middle;
}
a:hover{
background:red;
}
</style>
</head>
<body>
<a href="/go.html?url=#">
<img src="haha.png"/><span></span>
</a>
<a href="/go.html?url=#">
<img src="haha.png"/><span></span>
</a>
<a href="/go.html?url=#">
<img src="haha.png"/><span></span>
</a>
<a href="/go.html?url=#">
<img src="haha.png"/><span></span>
</a>
<a href="/go.html?url=#">
<img src="haha.png"/><span></span>
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta char
阅读背景：
如何让一个元素在父级元素中上下左右都居中_makelucky的博客
来源：互联网
分享到：
