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

canger 發布于2019-08-01 16:22 / 994人閱讀

摘要：圖片未知寬高垂直居中第一種條件容器寬高受圖片默認寬高影響結構代碼關鍵點使得容器即的寬度和高度隨圖片大小改變使得圖片在容器內部垂直居中和實現起來有區別，前者中容器的大小與這個容器內的圖片大小有關，后者中容器的長度與這個容器

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

第一種： 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 ：使得背景圖片在容器(即)中垂直居中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50475.html

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

摘要：圖片未知寬高垂直居中第一種條件容器寬高受圖片默認寬高影響結構代碼關鍵點使得容器即的寬度和高度隨圖片大小改變使得圖片在容器內部垂直居中和實現起來有區別，前者中容器的大小與這個容器內的圖片大小有關，后者中容器的長度與這個容器圖片 + 未知寬高 + 垂直居中第一種： table-cell / inline-block + vertical-align條件：容器寬高受圖片默認寬高影響ht...

plokmju88 2019-08-30 15:52 評論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