圖片 + 未知寬高 + 垂直居中

plokmju88 發(fā)布于2019-08-30 15:52 / 3124人閱讀

摘要：圖片未知寬高垂直居中第一種條件容器寬高受圖片默認(rèn)寬高影響結(jié)構(gòu)代碼關(guān)鍵點(diǎn)使得容器即的寬度和高度隨圖片大小改變使得圖片在容器內(nèi)部垂直居中和實(shí)現(xiàn)起來有區(qū)別，前者中容器的大小與這個(gè)容器內(nèi)的圖片大小有關(guān)，后者中容器的長(zhǎng)度與這個(gè)容器

圖片 + 未知寬高 + 垂直居中

第一種： table-cell / inline-block + vertical-align
條件：容器寬高受圖片默認(rèn)寬高影響
html結(jié)構(gòu)：

css代碼：

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

關(guān)鍵點(diǎn)：

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

)的寬度和高度隨圖片大小改變

vertical-align: middle ：使得圖片在容器內(nèi)部垂直居中

inline-block和table-cell實(shí)現(xiàn)起來有區(qū)別，前者中容器的大小與這個(gè)容器內(nèi)的圖片大小有關(guān)，后者中容器的長(zhǎng)度與這個(gè)容器內(nèi)圖片的長(zhǎng)度有關(guān)，容器的高度與那一行中所有容器內(nèi)圖片高度的最大值有關(guān)

第二種：“隱藏物體” + vertical-align
條件：容器寬高已知且大于圖片默認(rèn)寬高
html結(jié)構(gòu)：

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;
        }

關(guān)鍵點(diǎn)：

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

的vertical-align:middle和.hidden的vertical-align:middle規(guī)定元素和.hidden元素必須根據(jù)雙方的中部對(duì)齊排列

第三種：透明.gif + background-image:url("./圖片.jpg")
條件：容器寬高已知且決定圖片寬高

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

html結(jié)構(gòu)：

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;
             }

關(guān)鍵點(diǎn)：

transparent.gif ：透明，使得背景圖片成為展示圖片

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