在960.gs div中垂直對齊圖像？

我正在使用960.gs，並且想要垂直對齊IMG。我的感覺是，grid_3的第一個DIV內的IMG不知道該行的其餘部分（grid_6後綴_3的div）的高度爲。圖像擁抱頂部...在960.gs div中垂直對齊圖像？

一些限制：我可能不知道圖像的高度。我可能不知道DIV中右側的內容的高度爲。

不訴諸JavaScript，什麼是不會破壞960.gs的好方法？這是我去一個嵌套的容器，只爲了我可以垂直中心IMG的？我曾嘗試CSS規則：

img { 
    vertical-align: middle; 
}

有明顯更多的東西....

Snippet... 

    <div class="container_12"> 
      <div class="grid_3"> 
        <img src="images/dlsmug5.png"> 
      </div> 

      <div class="grid_6 suffix_3"> 
    <h1>My Title - etc...</h1> 
    <p> 
       Heya, revamp time! It may not be obvious, but..., 
       I am coming up to speed with the CSS framework 
       of <a href="http://960.gs">The 960 Grid System</a> .. 
    </p> 
      </div> 

      <div class="clear"></div>

來源

2011-07-11 Daniel Smith

AFAIK使用CSS垂直對齊圖像是非平凡的。但是，它獨立於960gs。你可以按照http://www.brunildo.org/test/img_center.html的方法嘗試一些東西，看看結果如何。 – Sukumar

你可以給分度，垂直對齊表格單元的行爲：

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

來源

2011-07-23 10:31:53 jjj

在960.gs div中垂直對齊圖像？

回答

相關問題