0
Скрипка http://jsfiddle.net/8wEYx/2/ иллюстрирует мою проблему. У меня есть div заголовка, который составляет 94% экрана, и навигационная панель, которая занимает остальные 6% внизу. Теперь моя проблема в том, что я хочу, чтобы мой логотип находился в вертикальной середине заголовка div, но без каких-либо фиксированных дополнений. Любые предложения, пожалуйста?Относительная эмблема в вертикальной плоскости из 100% высоты 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;
}
Взгляните на это: http://css-tricks.com/snippets/css/absolute- центр вертикально-горизонтально-ан-изображение / – robooneus