html - 将两个词彼此相邻放置 css

Question

我有一个简短的问题要问你，我知道它应该很简单...这里我有两个标题 (h1)。它们每个都包含 1 个单词，并且都必须彼此相邻放置，就像一个普通的短语一样，问题是我无法将它们居中。它们都应该与文档顶部和中心的标题完全一样。我同时使用它们是因为我想稍后将它们与 GSAP 或其他东西“补间”。

.title{
  display: inline;
  position: top center;
  }

#tr{
  position: left top;
  margin-top: 0.02%;
  color: lightgray;
  size:18px;
  }

#si{
  position: right top;
  margin-top: 0.02%;
  color: lightgray;
  size:18px;
  } 
   //that's on .css side

   //html
  <h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>

这个位置:顶部居中；行不会以预期的方式影响文本。为了向您展示它现在看起来像这样:

 |    Winter day       |                                    |                   |

*我刚刚放置的那些标记'|'不包含在元素中，它只是为了让您了解正在发生的事情。

Answer 1

最好的方法是将它们都放在一个 div 中，将它们显示为 inline-block 并为 div 赋予 text-align: center

HTML

<div class='centered-images'>
    <h1 class='title'>Winter</h1>
    <h1 class='title'>Day</h1>
</div>

CSS

.centered-images {
    text-align: center;
}

.title {
    display: inline-block;
    size: 18px;
    color: lightgray;
}

这是一个 jsfiddle进行演示。