制作一个所有内容垂直对齐的 CSS 标题答案

【问题标题】：Make a CSS header with all content vertical aligned制作一个所有内容垂直对齐的 CSS 标题
【发布时间】：2012-11-18 10:15:34
【问题描述】：

我对 CSS 很陌生，需要一些帮助。

我目前正在制作一个网站，其顶部 100% 宽度有一个标题，其内容遵循 960grid 系统。

这是我目前的做法，HTML 和 CSS：

<div id="header">
<div id="header-inner">
/logo/
/nav/
/search/
</div>
</div>

和css：

#header { background: red; }
#header-inner { margin: auto; padding: 25px 0; width: 940px; }

我已经在 header-inner 上使用了 clear-fix，一切正常。通过将徽标作为 IMG 插入，它可以确保徽标的顶部和底部之间有 25px 的空间，从而“定义”标题的高度。

即使在将导航作为 UL/LI 元素插入之后，它仍然可以工作，但是后来当我添加搜索输入时，一切都搞砸了。表单标签似乎在输入周围给了它一个不可见的边框，使其使用的高度超过了“需要”。

搜索输入也较大，显然形成了一个新的高度。

我只是想知道是否有一种聪明有效的方法来代替标题？无需从 header-inner 中删除 padding，也不必在 header-inner 父级中的每个元素上定义 padding-top 和 bottom

【问题讨论】：

【解决方案1】：

你可以通过列表来做到这一点

<ul>
  <li>logo</li>
  <li>nav</li>
  <li>search</li>
</ul>

你可以设置li的宽度

【讨论】：