gpt4 book ai didi

css - 如何在有效的 Twitter Bootstrap 中垂直居中内容?

转载 作者:行者123 更新时间:2023-11-28 03:33:06 27 4
gpt4 key购买 nike

我已经阅读了以前的问题并尝试了他们的解决方案,但似乎都没有用。

我的示例 Bootstrap HTML 非常简单:

...
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4" class="centering">
span4
</div>
<div class="span8" class="centering">
span8
</div>
</div>
</div>
</body>
...

描述centering类的CSS如下:

.centering {
float:none;
margin:0 auto;
}

浏览器通过将文本 span4span8 放在浏览器窗口的顶部而不是浏览器窗口的垂直中间来呈现此代码。我在设置时忽略了什么?

最佳答案

我不知道这在现实场景中是否对您非常实用,但无论如何值得一看:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
html, body{height:100%; margin:0;padding:0}

.container-fluid{
height:100%;
display:table;
width: 100%;
}

.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}

.centering {
float:none;
margin:0 auto;
}
</style>

</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4" class="centering">
span4
</div>
<div class="span8" class="centering">
span8
</div>
</div>
</div>
</body>
</html>

关于css - 如何在有效的 Twitter Bootstrap 中垂直居中内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16335553/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com