內聯元素的垂直對齊

Question

我有一個標題的水平導航菜單中內聯列表項的垂直對齊問題。由於佈局的其餘部分，我無法使用浮動。

我在想我可以在列表項中使用更大的行高，但這次並沒有太大的幫助。列表中的項目或多或少只是坐在那裏，至少在我使用Google Droid字體時。我也試過垂直對齊，但沒有。

基本結構是header - > header-content - > navigation> li> a 所有列表項都設置爲顯示：inline。 還有一個包含h1元素的列表項，其中包含一個封閉的圖像：li> h1> img和一個子菜單：li> ul>> li> a，其中圖像複雜化，因爲它的固定高度爲39px。

header div設置4個ems的高度，同時也是一個背景顏色。在這4個ems內，我需要垂直對齊導航的內容。

我需要一些想法如何實現這種垂直對齊。建議？ :-)

您可以在這裏找到問題的完整代碼示例：http://pastebin.com/zcLspjJz

我需要支持現代瀏覽器和IE7及以上。但任何想法都是值得歡迎的，真的。

Answer 1

你可以試試這些方法，如果它可以幫助：

• 使用height和line-height屬性，並使用相同的值兩種。 （例如，height:20px;line-heigt:20px;）
• 或設置display:table-cell; vertical-align:middle;