您的第一个问题的解决方案(在此处找到):
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/