Question

这可能是一个愚蠢的问题，但是在主标题下放置副标题的最佳方法是什么？我有一个主标题（h1），css在下面：

＆＃13;

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

＆＃13;

<h1>Test</h1>

＆＃13;

我想直接在它下面放一个副标题，但我不确定如何定位它而不指定顶部：＆＃34; x＆＃34; PX;

有什么建议吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

现有的CSS有点太多了，使用text-align: center可以更容易地进行居中，然后您可以对字幕执行相同的操作，并调整边距。如果您希望字幕更接近h1，请使用line-height: 1em（或任何其他符合您需求的值）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

没有愚蠢的问题！我们都准确地开始了你的位置:)首先，当Trevor说你有2个位置属性分配给这个元素时，你只能分配一个。其次，我不会使用绝对或相对定位来完成你想要的东西，因为它有点沉重。使用绝对定位+平移50％对某些浏览器并不完全友好。在这种情况下，最好的解决方案是将标题和子标题包装在父div标签内，并为该父div标签指定text-align：center的CSS属性。原因是你的父div将是一个块级元素并跨越容器的整个宽度，然后添加text-align：center将居中于该父级中的所有内联子元素。 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>

希望这有帮助！

如何在标题下面放置副标题

3 个答案: