如何垂直居中大小可以在div中更改的圖像？

當我不知道圖像的高度是多少時，如何用css垂直居中圖像？圖像以及高度將由服務器在運行時提供，並且可以是任意數量的高度。瞭解了這一點，我在div中創建了一個div，或多或少地遵循本教程的方法1：http://phrogz.net/css/vertical-align/。但是，只有當你知道你試圖集中的內容的高度時，這纔有效。因此，如何在地球上我垂直居中這樣的：如何垂直居中大小可以在div中更改的圖像？

<div class="galleryItem"> 
    <a href="wherever"> 
    <img src="whatever" width="173" height="155"> 
     <div class="galleryTitle"> 
      <div class="galleryImg"> 
       <img src="centerMeVertically.jpg"> 
      </div> 
     </div> 
    </a> 
</div>

這裏是一個失敗的CSS：

.galleryItem { 
    float: left; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #b78e18; 
    margin: 7px 4px; 
    padding: 5px; 
    width: 173px; 
    height: 190px; 
    position: relative; 
} 

.galleryTitle { 
    height: 33px; 
    width: 173px; 
    position: relative; 
} 

.galleryImg { 
    width: 173px; 
    height: 30px; 
    position: absolute; 
    top: 50%; 
    margin-top: -15px; 
} 

.galleryImg > img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2013-04-17 fildred13

我明白，我當然正在考慮它。但我真的很想做到「正確的方式」，我希望這裏的古魯有一些祕密的忍者黑客來實現它。我已經沉浸了足夠的時間，因爲它比工作要求更私人的仇恨。編輯：現在我看起來愚蠢的迴應一個已刪除的評論。總結一下：表格佈局 - 我知道這是一個選項，但我寧願不。 – fildred13

糾正我以前的評論，看看這個（實際上是一種重複，糾正我，如果我錯了：http://stackoverflow.com/questions/7206640/css-vertically-align-div-when-no-固定大小的div是衆所周知的） –

如何使用定位http://jsfiddle.net/m6GHX/ – Musa

甲表細胞具有調整其含量以垂直中心的能力。因此，我們需要通過將其'display'屬性更改爲'table cell'來將div的行爲更改爲table-cell。

現在請檢查下面的代碼，看到相應的div中的圖像垂直對齊中心。

.galleryImg { 
    display: table-cell; 
    height: 60px; 
    vertical-align: middle; 
    width: 173px; 
}

希望它能幫助你。

來源

2013-04-17 04:48:40

是的，這個答案是正確的，但正如我在前面的評論中提到的那樣，我很樂意這樣做，而不依賴於舊的以表格爲中心的方法，因爲我試圖做出前瞻性思考和符合標準。感謝您的答案，雖然:) – fildred13

我不知道有另一種方式垂直居中與CSS以外的東西。這很愚蠢，但它可能是唯一的方法。沒有什麼關於它違背「標準」的 - 它都是有效的CSS。 –

@ChrisBarr我在答案中添加了另一個解決方案 - 您可以使用CSS3的新「flexbox」選項。雖然公平，但我會堅持自己的表格。 – daamsie

-3

添加以下的CSS;

vertical-align：central;或垂直對齊：中間;

來源

2013-04-17 02:36:53 Sweety

a）沒有'vertical-align：central;'和b）這是行不通的。 – j08691

更好地在評論前檢查一下。有垂直對齊：中央;並正在工作。 – Sweety

垂直對齊僅在按照與表格相關的方式顯示的元素上按預期工作。雖然我意識到這個解決方案，但我試圖通過避免使用表格進行定位來更符合標準。如果你知道在非表格元素上進行垂直對齊：中心工作的方法，你可以擴展你的答案並告訴我們如何？我會認爲你是一個天才，我個人肯定會開始抵消你的投票:) – fildred13

我將計算第一就是在容器和圖像之間的高度差，然後除以兩個，使該上邊距

requiredMargin =（containerheight-imageheight）/ 2

您可以通過JS做到這一點，或者服務器端可以更好地處理人們因任何原因關閉了JS的情況。

.galleryImg img {margin-top:<requiredMargin>px;}

這是一個可靠的方法。

OR，CSS3的方式

如果你想只使用CSS和舒適僅支持最新的瀏覽器，那麼你可以考慮使用Flexbox的：

<div class="imageContainer"> 
    <img src="http://placehold.it/350x100"> 
</div> 

<style> 
.imageContainer { 
    height:300px; 
    display: -webkit-box; 
    -webkit-box-align: center; 
    display: -moz-box; 
    -moz-box-align: center; 
    display: -ms-flexbox; 
    -ms-box-align: center; 
    display: box; 
    box-align: center; 
} 
</style>

http://jsfiddle.net/gp5Ry/1/

爲了支持較舊的瀏覽器，您可以考慮使用Flexie。雖然我自己沒有使用過，但它似乎是一個不錯的選擇。

來源

2013-04-17 02:55:21 daamsie

但是，沒有辦法做到這一點只有HTML和CSS，這是不幸的。 – fildred13

那麼有一種方法。你只是不接受它是有效的。「display：table-cell;」只需要HTML和CSS，是完全合法的。在CSS中，並非所有東西都是完美的語義。我不會浪費時間過度擔心這一點。 – daamsie

@ fildred13在爲你進行了一些挖掘之後，我更新了答案以提供另一個不需要任何表格單元選項的選項。我個人仍然使用表格單元來覆蓋舊版瀏覽器。但對於純粹主義者來說，這應該勾選所有框。 – daamsie

在您的div上使用表格顯示屬性。這並不漂亮，但它的工作原理。

http://jsfiddle.net/staircasebug/dv9RS/

.galleryTitle { 
display: table; 
width: 100%; 
height: 300px; 
background: #eee; 
} 

.galleryImg { 
display: table-cell; 
vertical-align: middle; 
} 

img { 
margin: 0 auto; 
display: block; 
}

來源

2013-04-17 03:23:08 staircasebug

謝謝，unfortunatley我正在尋找一種非表格方式來做到這一點，正如我在其他評論中提到的那樣。我會用這個警告來更新主要問題。 – fildred13

我們在這裏沒有使用表格，我們只是將CSS顯示屬性添加到div。 – staircasebug

// JQuery的

$(function(){ 
    // vertical align images 
    $.fn.vAlign = function() { 
     return this.each(function(i){ 
      var ah = $(this).height(); 
      var ph = $(this).parent().height();   
      var mh = Math.ceil((ph-ah)/2); //var mh = (ph - ah)/2; 
      $(this).css('margin-top', mh); 
      //console.log(mh); 
     }); 
    }; 
    $('.galleryItem img').vAlign(); 
});

來源

2013-04-17 12:15:46

這是非常好的。我想避免使用jQuery和JavaScript，如果可以的話，如果只是感覺「乾淨」的一切。但是如果沒有找到純粹的CSS解決方案，我肯定會接受這個答案，因爲我沒有看到爲什麼它不會妨礙跨瀏覽器和向後兼容的理由。（<3 jQuery。） – fildred13

這裏是活生生的例子，你怎麼可以居中圖像的任何DIV 有一些額外的CSS美化但你可以忽略它

http://jsfiddle.net/pratswinz/vCBnD/

<div class="span2 cen_eventspan2"> 
      <figure class="span12 cen_event"> 
       <img class="img-polaroid-user" src="https://www.dropbox.com/s/j4x8plvaupv0ftp/AC_Feedback-box-buttons_unlcear_b.png" /> 
      </figure> 
     </div>

/----------------- css --------------------/

.cen_event { 
    background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    height: 172px; 
    line-height: 159px; 
    padding: 4px; 
    text-align: center; 
    width: 182px; 
} 
.cen_event .img-polaroid-user { 
    max-height: 160px; 
    max-width: 172px; 
    vertical-align: middle; 
    border:1px solid #f00; 

}

來源

2013-04-18 05:43:22 Pratswinz

如何垂直居中大小可以在div中更改的圖像？

回答

相關問題