使用引導程序垂直/水平對齊
[英]Align vertically / horizontally using bootstrap
問題描述
我已經問過幾次這個問題，但是沒有人能夠解決我的問題。
我的問題是我無法使標題完全位於整個頁面背景的中央。
但是，有一種方法可以起作用（在header標記中已注釋），但在完全兼容瀏覽器時會遇到問題。
HTML
<body>
<div class="container-fluid text-center">
<header role="banner" id="banner" class="vcenter">
<h1>Fix this</h1>
<h2>Bootstrap/css</h2>
<h3>Please</h3>
</header>
</div>
</body>
CSS （其余內容在jsfiddle中 ）
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
我做了一個jsfiddle來嘗試描述我面臨的問題。 請注意，背景圖像已更改為純色。 http://jsfiddle.net/wesbbtqn/
如果有人可以解決此問題，我將不勝感激，因為它困擾了我好多年了。
編輯-高度和寬度必須保持靈活。
4 個解決方案
解決方案1
2 已采納 2015-01-16 13:35:08
如果我正確理解您的要求：
水平居中：
只需添加text-align: center於h1，h2和h3。
垂直居中：
在純CSS中以一種受支持的跨瀏覽器方式來實現此目的的一種方法，並且沒有顯式設置容器的高度，是將display: table添加到容器的父級，以及display: table-cell （以及已經存在的vertical-align: middle ）到容器本身（在您的情況下為<header> ）
.vcenter {
vertical-align: middle;
display: table-cell;
}
解決方案2
0 2015-01-16 13:28:22
您在尋找這個嗎？
http://jsfiddle.net/shannabarnard/wesbbtqn/4/
我所做的就是添加
text-align: center;
width: 90%;
height: 50%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
到您的標題CSS。
解決方案3
0 2015-01-16 13:48:28
html, body { height: 100%; } header { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
<header> <h1>Fix this</h1> <h2>Bootstrap/css</h2> <h3>Please</h3> </header>
解決方案4
0 2015-01-16 14:00:37
首先，將您的此類.vcenter CSS代碼更改如下：
.vcenter {
display: inline;
vertical-align: middle;
float: none;
text-align:center;
}
然后在您的容器元素中添加新的類，就像<div class="container-fluid text-center page-container"> 。
並在CSS中添加新類以覆蓋height:100%; 來自.container-fluid ：
.page-container{
height:auto !important;
}
希望能有所幫助。
如何使用CSS或CSS + jquery在頁面上垂直和水平對齊div容器？
[英]How do I align a div container both vertically and horizontally on a page using CSS or CSS + jquery?
將圖像在Bootstrap滑塊中水平和垂直居中
[英]centering an image in the Bootstrap slider both horizontally and vertically
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.