使用引导程序垂直/水平对齐 [英] 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.
但是，有一种方法可以起作用(在header标记中已注释)，但是在实现完全与浏览器的兼容性时会遇到问题.
There is however one method that does work (commented out in the header tag) but faces problems when coming to full browser compatibility.
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/
I have made a jsfiddle to try and describe the problem I am facing. Note that the background image has been changed to a solid colour. 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.
推荐答案
如果我正确理解了您的要求:
If I get correctly what you're asking:
水平居中:
只需将text-align: center添加到h1，h2和h3.
just add text-align: center to h1, h2 and h3.
垂直居中:
在纯CSS中以一种受支持的跨浏览器方式来实现此目的的一种方法，并且没有显式设置容器的高度，就是将display: table添加到容器的父级中，然后将display: table-cell添加到该容器的父级中vertical-align: middle)到容器本身(在您的情况下为<header>)
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>)
.vcenter {
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/wesbbtqn/3/
这篇关于使用引导程序垂直/水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
