使用引导程序垂直/水平对齐
[英]Align vertically / horizontally using bootstrap
问题描述
I've asked this question a few times now, but no one has been able to resolve my problem. 
我已经问过几次这个问题，但是没有人能够解决我的问题。
The problem I have is that I can't get the header to sit completely centrally within a fullpage background. 我的问题是我无法使标题完全位于整个页面背景的中央。
There is however one method that does work (commented out in the header tag) but faces problems when coming to full browser compatibility. 但是，有一种方法可以起作用（在header标记中已注释），但在完全兼容浏览器时会遇到问题。
HTML 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 (rest is in the jsfiddle ) CSS （其余内容在jsfiddle中 ）
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
I have made a jsfiddle to try and describe the problem I am facing. 我做了一个jsfiddle来尝试描述我面临的问题。 Note that the background image has been changed to a solid colour. 请注意，背景图像已更改为纯色。 http://jsfiddle.net/wesbbtqn/ http://jsfiddle.net/wesbbtqn/
If someone can fix this I will be hugely grateful as it has been bugging me for ages. 如果有人可以解决此问题，我将不胜感激，因为它困扰了我好多年了。
EDIT - The height and width must remain flexible. 编辑-高度和宽度必须保持灵活。
4 个解决方案
解决方案1
2 已采纳 2015-01-16 13:35:08
If I get correctly what you're asking: 如果我正确理解您的要求：
Horizontal centering: 水平居中：
just add text-align: center to h1, h2 and h3. 只需添加text-align: center于h1，h2和h3。
Vertical centering: 垂直居中：
One way to achieve this in pure CSS, in a supported cross-browser way, and without setting explicitly the container's height is to add display: table to the parent of the container, and display: table-cell (along with the already present vertical-align: middle ) to the container itself (in your case: <header> ) 在纯CSS中以一种受支持的跨浏览器方式来实现此目的的一种方法，并且没有显式设置容器的高度，是将display: table添加到容器的父级，以及display: table-cell （以及已经存在的vertical-align: middle ）到容器本身（在您的情况下为<header> ）
.vcenter {
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/wesbbtqn/3/ http://jsfiddle.net/wesbbtqn/3/
解决方案2
0 2015-01-16 13:28:22
Are you looking for this: 您在寻找这个吗？
http://jsfiddle.net/shannabarnard/wesbbtqn/4/ http://jsfiddle.net/shannabarnard/wesbbtqn/4/
All I did was add 我所做的就是添加
text-align: center;
width: 90%;
height: 50%;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
to your header css. 到您的标题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
firstly, change your css code for this class .vcenter to be like this: 首先，将您的此类.vcenter CSS代码更改如下：
.vcenter {
display: inline;
vertical-align: middle;
float: none;
text-align:center;
}
and then, add new class in your container element, to be like this <div class="container-fluid text-center page-container"> . 然后在您的容器元素中添加新的类，就像<div class="container-fluid text-center page-container"> 。
and add new class in your css to override height:100%; 并在CSS中添加新类以覆盖height:100%; from .container-fluid : 来自.container-fluid ：
.page-container{
height:auto !important;
}
hopefully helping . 希望能有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.