如何垂直居中在使用引導佈局

-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

雖然這可能會回答問題，但您可能無法提供一些額外的細節並解釋答案。在目前的狀態下，這個答案是低質量的。 –

如何垂直居中在使用引導佈局

回答

相關問題