垂直對齊div內的圖像和響應高度

Question

我有以下代碼設置一個容器，其高度隨瀏覽器重新調整大小而改變（以保持方形寬高比）。

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

如何在容器內垂直對齊IMG？ 我的所有圖像都有不同的高度，容器不能有固定的高度/線高，因為它的響應...請幫忙！

Answer 1

這是一種在父級內部同時水平和垂直對齊內聯元素的技術：

垂直對齊

1）在該方法中，我們創建了一個inline-block （偽）元件作為母體的第一（或最后）的孩子，並設置其height屬性至100%采取其父的所有的高度。

2）另外，添加vertical-align: middle會將內聯（-block）元素保留在行間距的中間。 因此，我們將CSS聲明添加到第一個子 元素和我們的元素 （ 圖像 ）。

3）最后，為了刪除內聯（-block）元素之間的空白字符，我們可以通過font-size: 0;將父類的字體大小設置為零font-size: 0; 。

注意：我在下面使用了Nicolas Gallagher的圖像替換技術 。

有什么好處？

• 容器（ 父 ）可以具有動態尺寸。

• 無需明確指定圖像元素的尺寸。

• 我們可以輕松地使用這種方法垂直對齊<div>元素 ; 它可以具有動態內容（高度和/或寬度）。 但請注意，您必須重新設置div的font-size屬性才能顯示內部文本。 在線演示 。

<div class="container">
    <div id="element"> ... </div>
</div>

.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

輸出

響應式容器

由於OP已經知道如何創建響應式容器，因此本節不會回答這個問題。 但是，我會解釋它是如何工作的。

為了使容器元素的高度隨其寬度 （相對於縱橫比）而變化，我們可以使用百分比值來表示top / bottom padding屬性。

頂部/底部填充或邊距上的百分比值是相對於包含塊的寬度。

例如：

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

這是在線演示 。 從底部注釋掉線條並調整面板大小以查看效果。

此外，我們可以將padding屬性應用於虛擬子元素或:before / :after偽元素來實現相同的結果。 但請注意 ，在這種情況下， padding的百分比值是相對於.responsive-container本身的寬度 。

<div class="responsive-container">
  <div class="dummy"></div>
</div>

.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

演示＃1 。
演示＃2 （使用:after偽元素）

添加內容

使用padding-top屬性會在容器內部的內容頂部或底部產生巨大空間 。

為了解決這個問題，我們通過包裝元素包裝內容，使用絕對定位從文檔正常流中刪除該元素，最后展開包裝（使用top ， right ， bottom和left屬性）來填充整個空間它的父母， 容器 。

開始了：

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

這是在線演示 。

---

全力以赴

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>

.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

這是工作演示 。

顯然，您可以避免使用::before偽元素來實現瀏覽器兼容性 ，並創建一個元素作為.img-container的第一個子元素：

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

更新的演示 。

使用max-*屬性

為了使圖像保持在較低寬度的框內，您可以在圖像上設置max-height和max-width屬性：

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

這是更新的演示 。

Answer 2

使用flexbox這很容易：

小提琴

只需將以下內容添加到圖像容器中：

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex; /* add */
    justify-content: center; /* add to align horizontal */
    align-items: center; /* add to align vertical */
}

Answer 3

使用此css，因為您已經有了它的標記：

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
}

.img-container > img {
  margin-top:-50%;
  margin-left:-50%;  
}

這是一個有效的JsBin： http ：//jsbin.com/ihilUnI/1/edit

此解決方案僅適用於方形圖像（因為百分比margin-top值取決於容器的寬度，而不是高度）。 對於隨機大小的圖像，您可以執行以下操作：

.img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* add browser-prefixes */
}

使用JsBin解決方案： http ：//jsbin.com/ihilUnI/2/edit

Answer 4

您可以使用margin: auto和絕對定位來水平和垂直居中圖像。 也：

1. 可以通過使用偽元素來拋棄額外的標記。
2. 可以使用負左，上，右和下值顯示大圖像的中間部分。

 .responsive-container { margin: 1em auto; min-width: 200px; /* cap container min width */ max-width: 500px; /* cap container max width */ position: relative; overflow: hidden; /* crop if image is larger than container */ background-color: #CCC; } .responsive-container:before { content: ""; /* using pseudo element for 1:1 ratio */ display: block; padding-top: 100%; } .responsive-container img { position: absolute; top: -999px; /* use sufficiently large number */ bottom: -999px; left: -999px; right: -999px; margin: auto; /* center horizontally and vertically */ } 

 <p>Note: images are center-cropped on &lt;400px screen width. <br>Open full page demo and resize browser.</p> <div class="responsive-container"> <img src="http://lorempixel.com/400/400/sports/9/"> </div> <div class="responsive-container"> <img src="http://lorempixel.com/400/200/sports/8/"> </div> <div class="responsive-container"> <img src="http://lorempixel.com/200/400/sports/7/"> </div> <div class="responsive-container"> <img src="http://lorempixel.com/200/200/sports/6/"> </div> 

Answer 5

試試這個吧

  .responsive-container{
          display:table;
  }
  .img-container{
          display:table-cell;
          vertical-align: middle;
   }

Answer 6

這是一種技術，允許您垂直和水平居中任何內容！

基本上，您只需要一個兩個容器，並確保您的元素符合以下條件。

外側容器：

• 應該有display: table;

內部容器：

• 應該有display: table-cell;
• 應該有vertical-align: middle;
• 應該有text-align: center;

內容框：

• 應該有display: inline-block;

如果您使用此技術，只需將您的圖像（以及您要使用的任何其他內容）添加到內容框。

演示：

 body { margin : 0; } .outer-container { position : absolute; display: table; width: 100%; height: 100%; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; background: #fff; padding : 12px; border : 1px solid #000; } img { max-width : 120px; } 

 <div class="outer-container"> <div class="inner-container"> <div class="centered-content"> <img src="https://i.stack.imgur.com/mRsBv.png" /> </div> </div> </div> 

另見這個小提琴 ！

Answer 7

我遇到了這個線程，尋找一個解決方案：

• 使用給定圖像寬度的100％
• 保持圖像寬高比
• 保持圖像垂直對齊中間
• 適用於不完全支持flex的瀏覽器

測試上面發布的一些解決方案我沒有找到滿足所有這些標准的解決方案，因此我將這個簡單的解決方案放在一起，這可能對其他需要這樣做的人有用：

 .container { width: 30%; float: left; border: 1px solid turquoise; margin-right: 3px; margin-top: 3px; } .container:last-of-kind { margin-right: 0px; } .image-container { position: relative; overflow: hidden; padding-bottom: 70%; /* this is the desired aspect ratio */ width: 100%; } .image-container img { position: absolute; /* the following 3 properties center the image on the vertical axis */ top: 0; bottom: 0; margin: auto; /* uses image at 100% width (also meaning it's horizontally center) */ width: 100%; } 

 <div class="container"> <div class="image-container"> <img src="http://placehold.it/800x800" class="img-responsive"> </div> </div> <div class="container"> <div class="image-container"> <img src="http://placehold.it/800x800" class="img-responsive"> </div> </div> <div class="container"> <div class="image-container"> <img src="http://placehold.it/800x800" class="img-responsive"> </div> </div> 

關於JSFiddle的工作示例

Answer 8

嘗試

HTML

<div class="responsive-container">
     <div class="img-container">
         <IMG HERE>
     </div>
</div>

CSS

.img-container {
    position: absolute;
    top: 0;
    left: 0;
height:0;
padding-bottom:100%;
}
.img-container img {
width:100%;
}

Answer 9

HTML代碼

<div class="image-container"> <img src=""/> </div>

css代碼

img
{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
 }

Answer 10

制作另一個div並在div中添加'dummy'和'img-container'

HTML和CSS如下所示

 html , body {height:100%;} .responsive-container { height:100%; display:table; text-align:center; width:100%;} .inner-container {display:table-cell; vertical-align:middle;} 

 <div class="responsive-container"> <div class="inner-container"> <div class="dummy">Sample</div> <div class="img-container"> Image tag </div> </div> </div> 

而不是100％的“響應式容器”，你可以給出你想要的高度。