div中的引导中心文本自动填充屏幕

时间:2017-02-07 03:53:18

标签: html css twitter-bootstrap web twitter-bootstrap-3

这里很新,我会尽力解释。我尝试在页面顶部使用多个<div>和导航栏进行单页引导程序。我希望<div>填充浏览器窗口的高度,文本位于该div的中心。

我的问题

  1. 文字不会中心
  2. 如果我移除外包装<div id="welcome" class="welcome">并将css放在"container fill-height"上,则整个部分会在中间但不是全屏。我不知道为什么我们需要两个包装器<div class="textWelcome"><h2>welcome to first div</h2></div>
  3. 下面是我的代码,附有评论以进一步解释这个问题。在此先感谢您的帮助!

    <div id="welcome" class="welcome">  // when user scroll to this div, it fills the screen under nev bar
       <div class="container fill-height">
          <div class="textWelcome">
              <h2> Welcome to first div </h2> //this text should be in the middle of the "welcome" div 
          </div>
       </div>
    </div>
    

    这是我目前使用的CSS无效:

    .welcome{
        padding-top: 150px;
        padding-bottom: 150px;
        background: #E41b13; 
     }
    
    .textWelcome{
       vertical-align: middle;
       font-family: 'Georgia';
       color: rgb(255, 255, 255); /*white text*/
       font-weight: bold
    }
    

    更新:现在一切似乎都没问题,除了文字没有垂直居中

        <div class="container fill-height">
          <div class="row">
           <div class="col-lg-1"></div>
             <div id="hello" class="col-lg-10">
                  <h1 style="text-align:center;"> Hello World</h1>
             </div>
           <div class="col-lg-1"></div>
         </div>
       </div>
    

    和CSS:

    .fill-height{
       padding-top: 150px;
       padding-bottom: 150px;
       background: #E41b13; 
       min-height: 100%;
       height:100vh;
     }
    
    #hello{
      vertical-align: middle;
      font-family: 'Georgia';
      color: rgb(255, 255, 255); /*white text*/
      font-weight: bold
    }
    

2 个答案:

答案 0 :(得分:1)

首先将你的代码放在容器类中。为了使所有部分都在中心,使用bootstrap。 你可以使用text-align:center;在中心制作文字的属性。 以下是代码:

 <div class="container">
     <div class="row">
      <div class="col-lg-1"></div>
      <div class="col-lg-10">
        <h1 style="text-align:center;"> Hello World</h1>
      </div>
     <div class="col-lg-1"></div>
  </div>
</div>

答案 1 :(得分:1)

您可以使用transform属性:

executeMethod

笔:http://codepen.io/giannidk/pen/bgxjLW