Question

我之前尝试在另一个帖子中表达我的问题，但唯一可以修复它的方法，导致网站不符合不同大小的设备。我现在尝试使用的方法是本主题中所述的垂直中心方法。 vertical-align with Bootstrap 3

我想要发生的是拥有一个完整的页面背景以及包含我的姓名和职业的水平/垂直对齐的div标签。但相反，它发生的是它将文本对齐到页面的中间，但它只是没有垂直对齐。

<div class="container-fluid text-center">
<header role="banner" id="banner" class="vcenter">
        <h1>name</h1>
        <h2>occupation</h2>
        <h3>location</h3>

</header>
</div>

CSS

header {
/*position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%); */
font-family: Roboto-thin ;
padding: 0px;
border-style: none;
color:#ffffff ;
 }
header h1  {
font-family:;
font-size: 8rem; /* =28px */
letter-spacing: 0.05em;
padding: 0px ;
margin-top: 0px;
margin-bottom: 13px;
}

header h2 {
font-family: ;
font-size: 5rem;
padding: 0px;
margin: 0px;
}

header h3 {
font-family: ;
font-size: 3rem;

}

.container-fluid {
background-image: url(../../images/intro.jpg);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin:0px;
padding:0px;
height:100%;
}

.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}

我使用的旧方法可以在标题标签中找到。这种方法适用于某些浏览器，但似乎大多数浏览器不支持转换功能。

提前致谢。

Answer 1

Bootstrap通常使用百分比来实现跨平台/跨浏览器功能。也许您可以尝试将这样的内容添加到您的css文件中（与 .vcenter 类一起）：

.vcenter::before {
    content:'';
    display:inline-block;
    height: 100%;
    vertical-align:middle;
    width:0px;
 }

这将根据百分比检索屏幕的高度，并在显示之前垂直格式化文本，理论上，它应该适用于所有设备和浏览器（大多数情况下）。在IE8中，您必须使用：before 而不是 :: before 并声明！DOCTYPE 。希望这可以帮助！

为什么这个垂直对齐是否与引导程序一起使用？

1 个答案: