Question

这是我的HTML

<div class="wrap">
   <div class="container" style="padding: 5px 0px 10px 10px;">
      <a href="/"><img class="pull-right img-responsive" src="logo.png"></a>    
   </div>
   <nav id="w0" class="navbar navbar-default" role="navigation">
      <div class="container">
         <div id="w0-collapse" class="collapse navbar-collapse">
            <ul id="w1" class="navbar-nav nav">
               <li class="active"><a href="/">Home</a></li>
            </ul>
         </div>
      </div>
   </nav>
   <div class="img-responsive startpage" style="background-image: background.jpg;">
      <div class="container">
         <div class="site-index">
            <h1 class="middle"> Title vertical middle</h1>
         </div>
      </div>
   </div>
</div>
<footer class="footer">
</footer>

类.wrap涵盖全屏。那太完美了！我的问题是第三个子元素（具有img-responsive的div）在屏幕大小的中间结束。

如何让第三个孩子至少是Navbar和页脚之间的空间。当然，如果内容更多，它应该延伸......

这里是css类：

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}
.img-responsive{
    display: block;
    max-width: 100%;
    height: auto;
}
.startpage {
    padding-top: 20px;
}

接下来的问题是：如何让h1标签垂直对齐中间？

Answer 1

尝试这样的事情

{{1}}

儿童元素高度100％

1 个答案: