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>

这个位置：顶部中心; line不会以预期的方式影响文本。为了说明你，它现在看起来像这样：

 |    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来演示。

Answer 2

这是我的解决方案：

<style type="text/css">
.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;
}
</style>

<div style="text-align:center">
  <h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>
</div>

将两个单词放在彼此旁边的css上

2 个答案: