javascript - 在一行中居中对齐多个跨度

Question

我试图将多个跨度集中在一条线上，但它对我不起作用。它们总是在彼此下方居中对齐。我真的很感激一些帮助。这是代码：

 body {
            background-color: lightblue;
        }
        span {
            top: 0;
            transition: 0.1s ease-in;
            position: relative;
        }

        span:hover {
            color: orange;
            top: -10px;
        }

  <h1>
        <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
    </h1>

标签： javascripthtmlcss

Answer 1

一个简单text-align: center;的h1（即他们的容器）就足够了，因为spans 是内联元素：

body {
  background-color: lightblue;
}

span {
  top: 0;
  transition: 0.1s ease-in;
  position: relative;
}

span:hover {
  color: orange;
  top: -10px;
}

h1 {
  text-align: center;
}

<h1>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>

或者你的意思是字母/跨度应该在彼此下方并水平居中？为此，您可以display: flex在h1, 上使用以下设置：

body {
  background-color: lightblue;
}

span {
  top: 0;
  transition: 0.1s ease-in;
  position: relative;
}

span:hover {
  color: orange;
  top: -10px;
}

h1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

<h1>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
</h1>