图片 + 未知宽高 + 垂直居中

plokmju88 发布于2019-08-30 15:52 / 3062人阅读

摘要：图片未知宽高垂直居中第一种条件容器宽高受图片默认宽高影响结构代码关键点使得容器即的宽度和高度随图片大小改变使得图片在容器内部垂直居中和实现起来有区别，前者中容器的大小与这个容器内的图片大小有关，后者中容器的长度与这个容器

图片 + 未知宽高 + 垂直居中

第一种： table-cell / inline-block + vertical-align
条件：容器宽高受图片默认宽高影响
html结构：

css代码：

      div {
              display: inline-block;
              /*display: table-cell;*/
              padding: 10px;
              border: 2px solid #aaa;
          }
      img {
              vertical-align: middle;
          }

关键点：

display:inline-block ：使得容器(即

)的宽度和高度随图片大小改变

vertical-align: middle ：使得图片在容器内部垂直居中

inline-block和table-cell实现起来有区别，前者中容器的大小与这个容器内的图片大小有关，后者中容器的长度与这个容器内图片的长度有关，容器的高度与那一行中所有容器内图片高度的最大值有关

第二种：“隐藏物体” + vertical-align
条件：容器宽高已知且大于图片默认宽高
html结构：

css代码：

        .container {
            width: 800px;
            height: 600px;
            border: 2px solid #ffffd;
            text-align: center;
        }

        img {
            vertical-align: middle;
        }

        .hidden {
            height: 100%;
            width: 0;
            vertical-align: middle;
            display: inline-block;
        }

关键点：

.hidden元素以height:100%伸张自容器(即.container)顶部到容器底部，以width:0加以隐藏

的vertical-align:middle和.hidden的vertical-align:middle规定元素和.hidden元素必须根据双方的中部对齐排列

第三种：透明.gif + background-image:url("./图片.jpg")
条件：容器宽高已知且决定图片宽高

    "transparent.gif":    透明的gif格式图片;
    "background-image":   需要展示的图片;

html结构：

css代码：

          li {
                  list-style: none;
                  width: 256px;
                  height: 256px;
                  padding: 20px;
                  border: 2px solid #ffffd;
             }
          img{
                  width: 100%;
                  height: 100%;
                  display: block;

                  background-position: center;
                  background-image: url("./image.jpg");
                  background-size: 100%;
                  background-repeat: no-repeat;
             }

关键点：

transparent.gif ：透明，使得背景图片成为展示图片

background-position: center ：使得背景图片在容器(即)中垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116498.html

图片 + 未知宽高 + 垂直居中

摘要：图片未知宽高垂直居中第一种条件容器宽高受图片默认宽高影响结构代码关键点使得容器即的宽度和高度随图片大小改变使得图片在容器内部垂直居中和实现起来有区别，前者中容器的大小与这个容器内的图片大小有关，后者中容器的长度与这个容器图片 + 未知宽高 + 垂直居中第一种： table-cell / inline-block + vertical-align条件：容器宽高受图片默认宽高影响ht...

canger 2019-08-01 16:22 评论0 收藏0
对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0
常用元素水平垂直居中方案

摘要：实现水平垂直居中适用场景父子宽高都可未知比较推荐这种方式，简单，而且目前兼容性也不错。绝对定位加上负适用场景父元素宽高已知未知都行，但是首先得有宽高。 flex实现水平垂直居中适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) .parent { width: 100%; height: ...

hiyang 2019-08-30 15:44 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0