引導文本垂直居中對齊

我想在100vh高度垂直居中文本。這裏是我做了什麼引導文本垂直居中對齊

.about-header { 
 
    height: 100vh; 
 
    background: #000; 
 
} 
 
.about-header p { 
 
    font-size: 5em; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="container-fluid about-header text-center"> 
 
    <div class="row "> 
 
    <div class="col-md-12"> 
 
     <p>Lorem Ipsum</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-10-08 nikolas

@chirag嘗試給出一些答案，而不是僅從具有相同格式的月份進行編輯。（脫離主題） –

繼續Google和Google如何在CSS中垂直居中。 –

@PraveenPuglia，我的問題是關於垂直中心。它如何成爲重複。誰讓你像這樣回答'繼續和谷歌如何以CSS垂直居中。如果你不能只是離開它。在搜索google後我會問這裏。我遇到問題，這就是爲什麼問這裏。 – nikolas

-1

只需添加這下面的CSS： -

.about-header{ 
    height: 100vh; 
    background: #000; 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: center; 
     -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
     -ms-flex-align: center; 
     align-items: center; 
}

您的內容將垂直對齊。

來源

2016-10-08 09:16:32

工作。謝謝。它是否支持所有瀏覽器？老 – nikolas

是的，我已經添加了所有的瀏覽器自動前綴。因爲Flex有問題。 –

再次感謝... – nikolas

引導文本垂直居中對齊

回答

相關問題