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

关于图像垂直居中

最近在网上看到一篇关于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
页: [1]
查看完整版本: 关于图像垂直居中