0

我在标题的水平导航菜单中遇到内联列表项的垂直对齐问题。由于布局的其余部分，我不能使用浮动。

我在想我可以为列表项使用更大的行高，但这次并没有太大帮助。列表项或多或少只是坐在那里，至少当我使用 Google Droid 字体时。我也尝试了垂直对齐，但没有。

基本结构为 header -> header-content ->navigation > li > a 所有列表项都设置为 display:inline。还有一个包含 h1 元素的列表项，其中包含一个图像：li > h1 >img 和一个子菜单：li > ul > >li > a，其中的图像使事情变得复杂，因为它具有 39 像素的固定高度。

标题 div 设置 4 em 的高度和背景颜色。在这 4 个 em 中，我需要垂直对齐导航的内容。

我需要一些想法如何完成这种垂直对齐。建议？:-)

您可以在此处找到问题的完整代码示例：http: //pastebin.com/zcLspjJz

我需要支持现代浏览器和 IE7 及更高版本。但真的欢迎任何想法。

4

1 回答 1

1

您可以尝试这些方法，如果有帮助：

  • 使用height和line-height属性，并为两者使用相同的值。（例如height:20px;line-heigt:20px;）
  • 或设置display:table-cell; vertical-align:middle;
于 2012-09-26T10:26:18.853 回答