如何将 subheader 置于 header 正下方

Question

这可能是个愚蠢的问题，但是将子 header 置于主 header 下方的最佳方式是什么？我有一个主要的 header (h1) 并且 css 在下面：

h1 {
  color: #000;
  position: relative;
  position: absolute;
  left: 50%;
  top: 20%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

<h1>Test</h1>

我想在其正下方放置一个 subheader，但不确定如何在不指定顶部的情况下放置它："x" px;

有什么建议吗？

Answer 1

这可以是一个选项吗，使用包装器

div {
  position: absolute;
  left: 50%;
  top: 20%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
}
h1,
h4 {
  color: #000;
  position: relative;
}

<div>
  <h1>Test</h1>
  <h4>Test</h4>
</div>

Answer 2

你现有的 CSS 有点过分了，使用 text-align: center 可以更容易地居中，然后你可以简单地对字幕做同样的事情，加上调整边距。如果您希望字幕更接近 h1，请使用 line-height: 1em（或适合您需要的任何其他值）：

h1 {
  color: #000;
  margin-top: 20%;
  text-align: center;
  margin-bottom: 0;
}
h2 {
  margin-top: 0;
  text-align: center;
  line-height: 1em;
}

<h1>Test</h1>
<h2>Subtitle</h2>

Answer 3

没有愚蠢的问题！我们都从你所在的位置开始:) 首先，正如 Trevor 所说，你有 2 个位置属性分配给这个元素，而你只能分配一个。其次，我不会使用绝对或相对定位来完成您在这里想要的，因为它有点笨拙。同样使用绝对定位+translate 50% 对某些浏览器并不完全友好。在这种情况下，最好的解决方案是将标题和子标题包装在 parent div 标签内，并将 parent div 标签分配给 CSS 属性 of text-align：居中。这样做的原因是您的 parent div 将是块级元素并跨越容器的整个宽度，然后添加 text-align: center 将使所有内联 children 元素居中在那 parent 之内。 https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

码笔： http://codepen.io/chasereckling/pen/gwJkgN

<div>
  <h1>HEADING</h1>
  <h2>SUB HEADING</h2>
</div>

<style>
    div {text-align: center;}
</style>

希望对您有所帮助！

如何将 subheader 置于 header 正下方

how to position subheader right under header

html

css

positioning