我正在尝试将div中的某些文本垂直居中并与照片对齐。由于jsFiddle失败，继承代码：
CSS：
*{
margin: 0px;
padding: 0px;
font-family: arial;
}
.menu, .disappearing_content, .content {
width: 100%;
}
.menu {
background: #ffffff;
height: auto;
position: fixed;
top: 0;
display: inline;
padding: 0px;
-webkit-box-shadow: 0 1px 5px 0px #535353;
-moz-box-shadow: 0 1px 5px 0px #535353;
box-shadow: 0 1px 5px 0px #535353;
}
.disappearing_content {
background: #dbdbdb;
height: auto;
position: fixed;
top:77px;
z-index: -2;
padding: 15px;
}
.content {
height: 1000px;
background: #ffffff;
z-index:50;
margin-top: 218px;
padding: 15px;
}
/*Menu Nav Bar*/
div.nav{
border:1px solid silver;
display: table-cell; // this says treat this element like a table cell
vertical-align:middle; //now we can center vertically like in a TD
display: inline;
}
div.nav li{
display: inline;
}
HTML：
<body>
<div class="menu">
<img src="images/webheader.jpg">
<div class="nav">
<li>Home</li>
<li>Contact</li>
</div>
</div>
<div class="disappearing_content">
<!--Image that would disapear-->
<h1>this is instead of an image </h1>
<h1>this is instead of an image </h1>
<h1>this is instead of an image </h1>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar blandit dapibus. Suspendisse cursus, nunc nec fringilla tempor, diam mauris bibendum erat, in mattis mauris ipsum at ante. Morbi tincidunt nisl non odio molestie a imperdiet arcu malesuada. Suspendisse fringilla viverra faucibus. Pellentesque volutpat, quam eu accumsan tempor, libero nunc ultricies nisl, ac ornare lacus enim vitae dui. Morbi semper, mi ac varius molestie, justo lectus sollicitudin ipsum, pellentesque consectetur elit orci sagittis turpis. Nam sapien ante, fermentum ut volutpat vitae, suscipit vel augue. Nulla convallis ipsum vel tortor interdum blandit. In eleifend, ante ut pretium tempus, risus ligula bibendum dolor, mollis vehicula elit purus et felis. Morbi varius posuere augue. Vivamus tincidunt nulla eget metus porttitor luctus tempor dui facilisis. Aenean nec nibh augue, non semper tortor. Etiam sit amet ultrices magna. Ut elementum nulla eget nibh ullamcorper luctus. Vivamus tempor placerat ante in aliquam.
<br /><br />
Proin arcu dolor, scelerisque fringilla ullamcorper id, pharetra ut sem. Nullam egestas imperdiet pulvinar. Sed eu euismod ante. Curabitur dignissim libero quis libero accumsan pulvinar. Sed pretium, ipsum in mattis mollis, libero arcu varius arcu, quis suscipit enim urna quis lectus. Sed in odio eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus varius est, eu viverra lacus luctus ac. Nam enim arcu, fermentum eget aliquam ut, fringilla a eros.
<br /><br />
Praesent a dui quam, at bibendum risus. Curabitur ac sem id metus viverra volutpat. Aliquam vitae tristique ante. Fusce vestibulum, metus vitae posuere tincidunt, massa lorem lobortis mi, condimentum rhoncus sem sapien eu augue. Sed ut arcu tellus, vel mattis felis. Praesent vitae egestas felis. In porta luctus lacus, in vehicula tellus fringilla eget. Vestibulum laoreet quam ac est ornare sed rhoncus nibh molestie. Nullam pulvinar, massa sed molestie venenatis, elit sapien commodo nibh, consectetur gravida est ligula a metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc et ante tellus. Nam a est vel erat condimentum vestibulum et non justo. Integer interdum augue auctor nisi tristique sit amet consectetur libero ultricies. Proin tincidunt vestibulum tristique. Nulla sodales magna nec felis mattis gravida. Sed arcu arcu, cursus nec fermentum et, ultricies vel eros.
<br /><br />
Cras sit amet sem eu lectus lobortis convallis. Donec vel felis nec arcu porttitor convallis. Integer ut quam est, ac placerat neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis in consectetur dui. Curabitur non nibh magna. Curabitur neque neque, laoreet sit amet convallis vel, tincidunt vel libero. Quisque id malesuada dolor. Sed pellentesque erat congue tortor dictum porta. Integer aliquam ipsum at orci tempor bibendum ornare velit congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ultrices ligula sed dui suscipit accumsan. Etiam vitae enim eu risus sodales dapibus eget sagittis orci. Maecenas consequat ipsum at nulla lacinia molestie. Aliquam erat volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<br /><br />
Donec eget aliquet massa. Curabitur et euismod mauris. Ut est odio, commodo id fringilla adipiscing, laoreet ut erat. Aliquam non mauris at ligula consequat sollicitudin. Cras massa sem, volutpat nec feugiat eget, facilisis sit amet lectus. Nunc tempus volutpat imperdiet. Mauris porttitor turpis eget tellus faucibus viverra. Sed lorem massa, ultricies in ullamcorper at, mattis quis eros. Nulla sed ante magna. Suspendisse rutrum ultrices fringilla. Nulla eu varius tellus. Sed nulla magna, hendrerit eu viverra at, lacinia id sem. Pellentesque cursus mi nunc.
</div>
</body>
</html>
谢谢，我不确定是什么原因造成的。我不确定我是否应该使用display：inline-block;或者是什么。
感谢。