我有以下 fiddle :http://jsfiddle.net/BFSH4/
如您所见,有两个问题:
- h1 和 h2 没有垂直对齐。
- 导航和内容未水平对齐。
对于 1. 我已经尝试了 margin 和 padding。没有成功...
第二个也不是那么简单, float 和使用内联 block 的常用方法不起作用......
我做错了什么?
我终于设法使标题 float 。问题是 hgroup 不是 block 元素。 不过不管怎么说还是管用了我觉得企业名称和slogan还是用真人形象比较好。
现在只有水平对齐的问题失败了。
我不知道为什么: http://jsfiddle.net/BFSH4/2/
我可以做我想做的事,他们不可能不肩并肩!
最佳答案
第一个问题的解决方案 ( found here ):
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;
}
关于html - 不要管理定位(并排),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11018725/