2013-08-27 2 views
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; 
    } 
+0

Взгляните на это: http://css-tricks.com/snippets/css/absolute- центр вертикально-горизонтально-ан-изображение / – robooneus

ответ

0
#logo { 
    position:absolute; 
    left:50%; 
    margin-left:-150px; 
    margin-top:-62px; 
    top:50%; 
} 
Смежные вопросы