在Bootstrap中垂直对齐？
[英]Vertically align in Bootstrap?
问题描述
我在一个小型网站上工作，似乎无法弄清楚如何垂直排列我的名字。 我将CSS放在HTML文件中，以便您可以看到我在做什么。 提前致谢！
<head>
<title>Test</title>
<style>
section {
height: 100vh;
}
.test1 {
background: grey;
}
.name {
border: 3px solid white;
color: white;
padding: 25px 0;
width: 35%;
}
</style>
</head>
<body>
<section class="test1">
<div class="container">
<div class="row">
<h1 class="text-center name center-block">Dylan Bailey</h1>
</div>
</div>
</section>
</body>
3 个解决方案
解决方案1
3 2015-11-27 20:36:39
使用属性height和line-height两者的值应相同，这将使数据在中心对齐：）
解决方案2
3 已采纳 2015-11-27 20:43:23
如果页面上只有一个元素，这应该就是您所需要的。 您还必须删除h1标签设置的默认边距。
body { background: grey; width: 100%; height: 100%; } h1.name { border: 3px solid white; color: white; padding: 25px; margin: 0; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
<h1 class="name">Dylan Bailey</h1>
解决方案3
3 2015-11-27 20:46:27
只需使用引导程序随附的网格即可。 无需CSS。
<body>
<section class="test1">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 class="text-center name">Dylan Bailey</h1>
</div>
</div>
</div>
</section>
</body>
使用Bootstrap垂直对齐文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.