如何阻止居中更改文本移动

Question

最近我下载了一个文本旋转器插件。 效果很好，但有一个小问题。 每次更改文本时，整个标题都会移动，因为它是居中的。

这里举个简单的例子：（不介意js代码，只是插件的简化示例）

HTML

<h1>
Heading <span class="change">Change</span>
</h1>

CSS

h1 {
  text-align: center;
}

JS

var itr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var  interval = 1000; //one second
itr.forEach((itr, index) => {
setTimeout(() => {
    $('.change').text('Car');
            setTimeout(() => {
            $('.change').text('Boat');
                    setTimeout(() => {
                    $('.change').text('Helicopter');
                    }, index * interval
                   );
          }, index * interval
         );
  }, index * interval
 );
})

你可以在这里试试： https://jsfiddle.net/teku3a0w/1/
有没有办法阻止标题在改变时移动？

永久保证金肯定是一个答案，但我希望它能够响应。

Answer 1

我自己找到了一个很好的解决方案。

.change{
  display: inline-block;
    width: 150px;
    text-align: left;
}

我为变化的部分添加了固定宽度。
请注意，宽度必须足够大以包含列表中最长的单词。

你可以在这里试试： https://jsfiddle.net/0Lqpj2zc/

Answer 2

这是我对 HTML 和 CSS 所做的更改：

HTML：

<h1>
  <span>Heading</span>
  <span style = 'padding-left: 6px' class="change">Change</span>
</h1>

CSS：

h1 {
  display: flex;
  justify-content: center;
  width: 400px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
}

@media screen and (min-width: 768px) {
  h1 {
    flex-direction: row;
    justify-content: center;
  }

  span.change {
    width: 150px
  }
}

这些是固定宽度，所以这个解决方案并不是那么灵活。 但是您可能有更好的时间将最长的单词放在最前面，抓住那个宽度，然后将span.change的宽度设置得比这大一点。

我将我的媒体查询设置为 768 像素，因为这是开始考虑平板电脑尺寸及以上屏幕的好尺寸。

这种方法可能不是最好的解决方案，但它仍然是:)