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

-5

#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基本上居中任何元素，即使名称似乎表明它是文本？

来源

2017-12-18 mo_maat

你使用bootstrap 4吗？检查[flex的bootstrap实现]（https://getbootstrap.com/docs/4.0/utilities/flex/#align-items） –

https://stackoverflow.com/a/17521229/4229270 – Sinto

https：// stackoverflow .com/a/13075912/4229270 – Sinto

.container .row div 
{ 
    display: table; 
    margin: 0 auto; 
} 

#content 
{ 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle;  
}

来源

2017-12-18 08:13:07

虽然这可能会回答问题，但您可能无法提供一些额外的细节并解释答案。在目前的状态下，这个答案是低质量的。 –

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

回答

相关问题