垂直對齊圖像（平齊頂部），不齊平底部

我有一個div標記，其中包含圖像。假設不同的垂直大小的圖像，默認情況下，圖像對齊底部。如何更改代碼，以便讓圖像對齊頂部？垂直對齊圖像（平齊頂部），不齊平底部

這是完整的HTML代碼。

CSS

#page { 
     position: relative; 
     padding: 0px 0px 0px 0px; 
     float: left; 
     border: none; 
    } 
    .divPortfolioImageRowFirst 
    { 
     display: table-row; 
    } 
    .divPortfolioImageCol1 { 
     vertical-align: top; 
    }

HTML

<div id="page"> 
     <div> 
      <div id="divProductLogos"> 
       <div class='divPortfolioImageRowFirst'> 
        <div class='divPortfolioImageCol1' style='line-height: 78px' id="divProductLogos_1"> 
         <img style='margin-left: 0px;' src="./images/portfolio/ProductLogos_1.png"/> 
         <img style='margin-left: 15px;' src="./images/portfolio/ProductLogos_2.png"/> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>

添加的「垂直對齊：頂部;」和「line-height：78px;」沒有做到這一點。

我忘了/不做什麼？

來源

2013-08-21 Sarah Weinberger

你不需要在divPortfolioImageCol1顯示塊，div的自然顯示塊，除非是某個改變 – Huangism

什麼是'flush'？ – putvande

我的意思是頂部的圖像應該垂直對齊頂部，留下一個衣衫襤褸的底部。現在，圖像對齊齊平的底部，留下一個乾淨的底部和一個衣衫襤褸的上衣。我想要反過來。 –

我想你想要像下面這樣：

的HTML：

<div id="divProductLogos"> 
    <div class='divPortfolioImageRowFirst'> 
     <div class='divPortfolioImageCol1'> 
      <img src="http://placekitten.com/150/200" /> 
      <img src="http://placekitten.com/150/250" /> 
     </div> 
    </div> 
</div>

和CSS：

.divPortfolioImageRowFirst { 
    border: 2px dotted gray; 
    padding: 10px; 
} 
.divPortfolioImageCol1 { 
    border: 1px dotted gray; 
} 
.divPortfolioImageCol1 img { 
    vertical-align: top; 
}

本來，你有太多的花車影響佈局，這是造成一些問題。

您還可以根據其他設計考慮使用CSS表格單元。

演示小提琴：http://jsfiddle.net/audetwebdesign/9fhCS/

關於vertical-align屬性

的vertical-align財產不繼承，所以它作爲被應用到了需要調整的內聯元素。在父容器上指定vertical-align不會影響子元素。

參考：http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

來源

2013-08-21 19:02:14

我在真實頁面上測試瞭解決方案並且代碼正常工作。答案似乎是必需的「.divPortfolioImageCol1 img {vertical-align：top;}」。只需在.divPortfolioImageCol1 {}內放置「vertical-align：top」並沒有什麼用。有趣。我以爲風格流下了。我猜他們沒有。 –

嗨莎拉，這是一個很好的觀點。請參閱我對垂直對齊屬性的評論。 –

嗨馬克，我讀了你的評論，而且這個事實根本不明顯。當我學習CSS時，我被教會了從父容器中欺騙的風格。我將不得不保留一個精神上的注意點，或者寫下來，例如，垂直對齊的風格，打破規則。謝謝。 –

首先，valign是不是有效的屬性，你應該使用vertical-align: top;

您還需要設置line-height到最高的圖像的高度。

來源

2013-08-21 18:27:40

我已經實現了這個加法，正如你所看到的那樣，那並沒有成功。您可以使用本地瀏覽器自行測試，只需使用兩個不同的垂直大小的圖像即可。其中一個是78px，另一個是38px。如果一切正常，根據需要，圖像在頂部與衣衫襤褸的底部對齊。 –

垂直對齊圖像（平齊頂部），不齊平底部

回答

相關問題