javascript - 如何在不使文本变形的情况下使文本中心与无序列表对齐？

我喜欢在顶部显示图像背景的无序列表文本中心。但不幸的是，我的文字经了歪曲。我不知道为什么会这样。请修正我的代码。

我的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.image {
  width:100%;
  height:200px;
}
.container {
  position: relative;
  color: white;
  height:200px;
  width:100%;
}
.title {
    font-family: Ubuntu;
    font-weight: bold;
    font-size: 30px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.title ul li {
    display: inline-block;
    list-style:none;
    letter-spacing:0px;
}
</style>

<div class="container">
<img src="image.jpg" class="image">
 <div class="title" >
        <ul>
            <li>S</li>
            <li>o</li>
            <li>m</li>
            <li>e</li>
            <li>T</li>
            <li>e</li>
            <li>x</li>
            <li>t</li>
            <li>H</li>
            <li>e</li>
            <li>r</li>
            <li>e</li>
        </ul>
    </div>
</div>

预期输出，图1

https://i.stack.imgur.com/0zHnW.jpg

（图1：上面的图片是使用照片编辑器编辑的，以显示我的预期输出）

但是，我得到的输出，Fig2

https://i.stack.imgur.com/ZzMeW.jpg

（图2：上面的图片是我实际得到的原始输出的屏幕截图）

我不知道我在做什么错。请修正我的代码并解释。我需要的是，列表在同一行中显示在图像背景的中心而不会变形。

最佳答案

由于单词的每个字母都在单独的<li>标记中，因此可能会解决以下问题。

.container .title ul {
  display: flex
  flex-wrap: nowrap;
}

在这里添加以下css也将是有益的：

.title {
  display: flex;
  justify-content: center;
  width: 100%;
}

这将调整标题容器的大小以适合整个屏幕，而目前还不适合整个屏幕。

另外，在演示页面上，您仍然需要在display: flex;中添加<ul>。

根据我在检查器中看到的内容，做这些事情应该可以解决您的问题。

关于javascript - 如何在不使文本变形的情况下使文本中心与无序列表对齐？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60938411/