0

フィドル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;
    }
4

1 に答える 1