Question

下面是我目前用于<h1>标记的CSS代码，以使它们在响应式横幅中保持垂直居中（更正欢迎）。在<h2>标题中添加<h1>字幕的最简单方法是什么，这两个标题都在横幅内，另外还有两个标题垂直居中，只有空格或相似之处？

.image {
   position: relative; 
   vertical-align: middle;
}

h1 { 
   font-family: 'Merriweather Sans', sans-serif;
   position: absolute; 
   letter-spacing: 3px;
   font-size: 300%;
   text-align: center;
   bottom: 40%;
   width: 100%;
   height: 15%;
   color: white;
}

Answer 1

如果您不想在该横幅上使用特定高度，则可以使用填充：

<header> <!-- with background image -->
  <div id="content">
    <h1></h1>
    <h2></h2>
  </div>
</header>

#content {
  text-align: center;
  padding: 3rem 0;
}

如果横幅具有特定高度，则可以使用transform：

header {
  height: 300px;
  position: relative;
  background-image: url();
}

#content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

在响应式横幅图像中垂直居中H1 + H2线

1 个答案: