[已解决]关于图像垂直居中

zjmttt · 发表于 2019-5-8 19:58:01

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

最近在网上看到一篇关于vertical-align:middle的文章，添加一个辅助元素使得照片变成完美居中，想想原理也对，可是实现起来确没有效果，还是近似垂直居中，请问一下是哪里不对。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical-align</title>
<style>
.box {
      line-height: 300px;
      text-align: center;
      font-size:200px;
   }
   .box img {
      vertical-align: middle;
   }
   span {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
   }
</style>
</head>
<body>
<div class="box">
      <img src="https://cloud.az22c.top/logo.jpg?imageMogr2/thumbnail/x100" alt="图片src要设置!!"/>
      <span></span>
   </div>
</body>
</html>

最佳答案

月排行榜 / 总排行榜

sukiwhip

2019-5-9 15:01:53

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical-align</title>
<style>
.box {
line-height: 300px;
text-align: center;
background-color: #f40;
}
.box img {
vertical-align: middle;
}
span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="https://cloud.az22c.top/logo.jpg?imageMogr2/thumbnail/x100" alt="图片src要设置!!" />
<span></span>
</div>
</body>
</html>

复制代码

为何要搞个 font-size

跳转到最佳答案楼层

sukiwhip · 发表于 2019-5-9 15:01:53

这个最佳答案由 sukiwhip 给出，感谢 sukiwhip 的回答。

单击隐藏图章

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical-align</title>
<style>
.box {
line-height: 300px;
text-align: center;
background-color: #f40;
}
.box img {
vertical-align: middle;
}
span {
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box">
<img src="https://cloud.az22c.top/logo.jpg?imageMogr2/thumbnail/x100" alt="图片src要设置!!" />
<span></span>
</div>
</body>
</html>

复制代码

为何要搞个 font-size

账号		自动登录	找回密码
密码			立即注册