フィドルhttp://jsfiddle.net/8wEYx/2/は私の問題を示しています。画面の 94% を占めるヘッダー div と、下部の残りの 6% を占めるナビゲーション バーがあります。今私の問題は、ロゴをヘッダー div の垂直方向の中央に配置したいが、固定されたパディングがないことです。何か提案はありますか?
HTML :
<div id="header">
<div class="container">
<div class="row">
<div class="span12">
<div id="logo">
<p class="silence">silence<span>.</span></p>
<p class="tagline">Business solutions to the point</p>
</div>
</div>
</div>
</div>
</div>
<div id="navbar">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
html, body {
height:94%;
}
#header {
min-height: 100%;
height: auto !important;
height: 100%;
}
#logo {
margin-top:250px;
}
#logo p.silence {
font-size:8em;
text-align:center;
}
#logo span {
color:#c00;
}
#logo p.tagline {
margin-top:25px;
text-align:center;
text-transform:uppercase;
}
#navbar ul {
margin:auto;
padding:30px 0;
text-align:center;
width:100%;
}
#navbar ul li {
display:inline-block;
list-style:none;
margin:0 25px;
text-transform:uppercase;
}