Javascript 在一条直线上居中对齐多个跨距

我试图在一条直线上居中多个跨度，但这对我不起作用。它们总是居中对齐，一个在另一个下面。我非常感谢你的帮助。代码如下：

正文{
背景颜色：浅蓝色；
}
跨度{
排名：0；
过渡：0.1s缓进；
位置：相对位置；
}
跨度：悬停{
颜色：橙色；
顶部：-10px；
}

你好

简单的

文本对齐：居中span

s是内联元素，因此

h1

（即其容器）上的code>就足够了：

正文{
背景颜色：浅蓝色；
}
跨度{
排名：0；
过渡：0.1s缓进；
位置：相对位置；
}
跨度：悬停{
颜色：橙色；
顶部：-10px；
}
h1{
文本对齐：居中；
}

你好

正文{
背景颜色：浅蓝色；
}
跨度{
排名：0；
过渡：0.1s缓进；
位置：相对位置；
}
跨度：悬停{
颜色：橙色；
顶部：-10px；
}
.centerH1{
文本对齐：居中；
}
div{
宽度：100%；
}

你好

你的意思是

h1{text align:center}

你能告诉我现在如何垂直居中吗？