如何垂直居中在使用引导布局

  • Z时代
  • 2024-01-10
  • 分类：问答

对齐一个div我有下面的代码片段：如何垂直居中在使用引导布局

#content{  
    text-align: center;  
    vertical-align: middle;  
}

<body>  
    <div class="container">  
     <div class="row">  
      <div class="col-lg-12">  
       <div id="content">  
        <h1>Sample Text</h1>  
        <h3>Subtext to the intro to the site</h3>  
        <hr>  
        <button class="btn btn-default btn-lg">Get Started!</button>  
       </div>  
      </div>  
     </div>  
    </div>  
</body>

我使用的是引导的网格系统。我希望能够使用id="content"（基本上我希望整个内容水平和垂直居中，即使在页面调整大小时）垂直居中div的内容。这是一个以图像为背景的醒目页面。我怎样才能使用CSS？ vertical-align: middle不起作用。

而仅仅为了我的学习，text-align: center基本上居中任何元素，即使名称似乎表明它是文本？

回答：

.container .row div 
{ 
    display: table; 
    margin: 0 auto; 
} 
#content 
{ 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle;  
}

以上是 如何垂直居中在使用引导布局 的全部内容， 来源链接： utcz.com/qa/260781.html

回到顶部