html - 不要管理定位（并排）

Question

我有以下小提琴：http: //jsfiddle.net/BFSH4/

如您所见，有两个问题：

1. h1 和 h2 没有垂直对齐。
2. 导航和内容不是水平对齐的。

对于 1. 我已经尝试过边距和填充。没有成功...

第二个也不是那么容易浮动和使用 inline-block 的常用方法不起作用......

我究竟做错了什么？

我终于设法浮动标题。问题是 hgroup 不是块元素。但是，即使它仍然有效，我认为最好使用真实的图像作为企业名称和口号。

现在只有水平对齐的问题失败了。

我不知道为什么：http: //jsfiddle.net/BFSH4/2/

我可以为所欲为，他们不可能不并肩！

Answer 1

您的第一个问题的解决方案（在此处找到）：

HTML

<div class="header">
    <span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>

CSS

.header {
    height: 160px;
    border: 1px solid #8a2be2;
    /* text-align: center; */
}

.header span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}

.header img {
    display: inline-block;
    height: 160px;
    float: left; /* added, so the image will appear left to the text correctly */
}

.header hgroup {
    margin: 0;        
    vertical-align: middle;
    display: inline-block;
}

此解决方案取决于display: inline-block

第二个问题的解决方案：

.nav {
    width: 229px;
    display: block;
    margin: 0 auto;
}

现场演示：http: //jsfiddle.net/BFSH4/4/