我在一个小网站上工作,我似乎无法弄清楚如何将我的名字垂直居中。我将我的 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>
最佳答案
如果页面上只有一个元素,这应该就是您所需要的。您还必须删除 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>
关于html - 在 Bootstrap 中垂直对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33964415/