html - 在 Bootstrap 中垂直对齐?

标签 html css twitter-bootstrap vertical-alignment

我在一个小网站上工作,我似乎无法弄清楚如何将我的名字垂直居中。我将我的 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/

相关文章:

php - "header()"php函数是否取消设置全局变量?

javascript - ajax 的 ajax 硬编码值(新手)

javascript - div 之间的网格高度问题?

javascript - 为 div 状态设置 cookie (javascript)

javascript - jQuery 和多个 "category"选择器

css - 单击按钮更改响应和无响应的站点

javascript - 如何在多个元素上使用 onmousehover 事件?

php - DATE_FORMAT(库存日期时间 ,'%Y-%m-%d')

html - 在 sing html 文件的不同部分使用不同的 Css 文件

javascript - 移动设备上的堆栈布局不同