Question

小提琴http://jsfiddle.net/8wEYx/2/说明了我的问题。我有一个标题div占屏幕的94％，一个导航栏占据了底部的另外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;
    }

Answer 1

#logo {
    position:absolute;
    left:50%;
    margin-left:-150px;
    margin-top:-62px;
    top:50%;
}

垂直中间100％高度div的相对标识

1 个答案: