独特的图片垂直居中

最新推荐文章于 2024-07-25 15:07:09 发布

mufengs16

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量123

点赞数

分类专栏： CSS2.0 文章标签： html css

本文链接：https://blog.csdn.net/qq_44087363/article/details/109596641

版权

CSS2.0 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

独特的图片垂直居中

<!DOCTYPE html>
<html>
  <head>
    <title>实现图片的垂直居中</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-sclae=1.0">
    <style type="text/css">
      * {
        margin:0;
        padding:0;
      }
      .wrapper {
        text-align:center;
        margin:0 auto;
        width:400px;
        height:400px;
        background-color:rgb(105, 134, 228);
      }
      .wrapper:before {
        content:"";
        display:inline-block;
        height:100%;
        vertical-align:middle;
      }
      .wrapper img {
        vertical-align:middle;
      }
      /*思路：图片垂直居中是要相对于一个元素类型为inline-block的垂直居中元素设置垂直居中的效果
      此处则是通过添加伪类去制造出一个具有inline-block的垂直居中元素*/
    </style>
  </head>
  <body>
    <div class="wrapper">
      <img src="./pre03.png" width="200px" alt="Pictures"/>
    </div>
  </body>
</html>

思路：图片垂直居中是要相对于一个元素类型为inline-block的垂直居中元素设置垂直居中的效果

此处则是通过添加伪类去制造出一个具有inline-block的垂直居中元素

mufengs16

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
独特的图片垂直居中

独特的图片垂直居中<!DOCTYPE html><html> <head> <title>实现图片的垂直居中</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-sclae=1.0"> <style type="text/css"> *
复制链接

扫一扫

专栏目录