Facebook的照片/圖像垂直對齊？

Facebook如何垂直對齊其照片？我檢查了他們的img標籤和它的父母。父級不使用填充，img不使用邊距。有垂直對齊，但我不認爲它適用於這種情況（請參閱Image not vertical-align:middle）。我通常垂直對齊使用邊距（有時與JavaScript），所以我感興趣的是如何Facebook沒有填充或邊距。有誰知道他們是如何做到的？Facebook的照片/圖像垂直對齊？

來源

2012-04-11 Derek

在Facebook的網站上做了一些研究之後，我找到了答案，這裏是代碼

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
     .img_contain { 

      height: 700px; 
      text-align: center; 
      line-height: 700px; 
      border: #333333 1px solid; 
     } 
     .img_contain img { 
      display: inline-block; 
      vertical-align: middle; 
     } 

    </style> 
</head> 
<body> 
    <div class="img_contain"> 
     <img src="images/image.jpg" /> 
    </div> 
</body> 
    </html> 


Only thing i was missing is adding <!DOCTYPE html> at the top of the document.Now its working.

還有一件事家長的高度和行高應該是平等的，它應該是更大比圖像的高度它包含

來源

2012-04-12 17:20:34

我在這可以解釋爲什麼這個問題的鏈接。簡而言之，垂直對齊僅適用於表格。其次，我基本上說過你在我的問題中所做的一切。第三，你的「答案」沒有幫助解決問題，實際上，你在「答案」中提出另一個問題。從你的個人資料來看，你是這個網站的新手，但在未來請不要回答這個問題，你只會被拒絕投票。最後，請你刪除這個「答案」，因爲它確實不是一個，如果你希望你的問題得到解答，請發表你自己的問題。 – Derek 2012-04-13 02:22:57

其實我有同樣的問題，所以我認爲這將是更好的問它here.as我是這個網站的新手，我不知道它會在answers.Anyway我有同樣的問題，希望得到一些答案。我不在這裏得票。 – 2012-04-13 09:00:04

@Derek我編輯了答案，你以前的評論讓我找到你和我的問題的答案。 – 2012-04-13 11:00:09

測試的代碼使用顯示：表小區

*指http://www.w3schools.com/cssref/pr_class_display.asp *
測試頁在http://anotherfeed.com/stack/css/valign.php

<!DOCTYPE html> 
<html> 
<head> 

<title>StackOverflow on Another Feed</title> 

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
</head> 
<body> 
<div style="height: 500px; min-height: 500px; width: 500px; border: 1px solid; display: table-cell; vertical-align: middle; text-align: center"> 
<img src="http://anotherfeed.com/facebook_icon.png" style="display: inline-block; margin-left: auto; margin-right: auto;" /> 
</div> 
</body> 
</html>

來源

2012-04-12 17:40:36

我不明白，你的圖像不是在包裝div的中間垂直。此外，我不想使用表格或表格單元格，垂直對齊在表格中工作，但我更喜歡div。 – Derek 2012-04-13 02:18:12

@Derek - 如果包含圖像的div更高，那麼圖像將在中間垂直對齊，否則它將在容器100％的最大高度，最小100％高的div。 :-)它被測試。 – 2012-04-13 14:04:23

我在測試頁面中編輯了代碼，請記住！DOCTYPE是必需的。 – 2012-04-13 14:39:27

Facebook的照片/圖像垂直對齊？

回答

相關問題