使用引导程序垂直/水平对齐 | 使用引导程序垂直

本文介绍了使用引导程序垂直/水平对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经问过几次这个问题，但是没有人能够解决我的问题.

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/

这篇关于使用引导程序垂直/水平对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！