Как выровнять текстовый центр с неупорядоченным списком без деформации текста?

Question

Мне нравится показывать неупорядоченный текстовый центр списка фона изображения вверху. Но, к сожалению, я получаю искаженный текст. Я не знаю, почему это происходит. Пожалуйста, исправьте мой код.

Мой код,

<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>

Ожидаемый результат, fig1

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

(рис. 1: Это изображение было отредактировано с помощью фоторедактора, чтобы показать мой ожидаемый результат)

Но, вывод я получение, fig2

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

(fig2: это изображение выше - скриншот оригинального вывода, который я получаю на самом деле)

Я не знаю, что я делаю не так. Пожалуйста, исправьте мой код и объясните. Мне нужно, чтобы список отображался в центре фона изображения в одной строке без деформации.

Answer 1

Поскольку каждая буква вашего слова находится в отдельных тегах <li>, одна вещь, которая может это исправить, заключается в следующем:

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

Также было бы полезно добавить следующее css:

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

Размер контейнера заголовка будет соответствовать размеру всего экрана, чего на данный момент нет.

Кроме того, со своей демонстрационной страницы вам все равно нужно добавить display: flex; к вашему <ul>.

Из того, что я вижу в инспекторе - выполнение этих вещей должно решить вашу проблему.