javascript - 光标与文本不对齐

Question

我已经编写了一个 html 文件，并且对于类型编写器之类的动画，我使用了 typed.js。

代码如下

var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            smartBackspace:true,
            typeSpeed:100,
            backSpeed:80,
            startDelay:20,
            backDelay:20,
            loop:true,
            showCursor: true,
            cursorChar: '|',
            autoInsertCss: true
        });

.center {
    position: relative ;
    top:  50%;
    left: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    /* color: #ffffff; */
  }
  
  .typed-cursor {
    display: inline;
    font-size: 48px;
    opacity: 1;
    animation: blink .7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.js"></script>
<div id="typed-strings">
                <p>Myself Big Bounty</p>
                <p>I'm a coder</p>
                <p>I'm ML enthusiast</p>
 </div>
 <span id="typed" class="center"></span>

为什么光标会从文本中分离出来？我应该如何将光标与文本对齐？

Answer 1

尝试将“键入的”范围包装在“居中”的 div 中。像这样:

var typed = new Typed('#typed', {
            stringsElement: '#typed-strings',
            smartBackspace:true,
            typeSpeed:100,
            backSpeed:80,
            startDelay:20,
            backDelay:20,
            loop:true,
            showCursor: true,
            cursorChar: '|',
            autoInsertCss: true
        });

.center {
    position: relative ;
    top:  50%;
    left: 50%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    /* color: #ffffff; */
  }
  
  .typed-cursor {
    display: inline;
    font-size: 48px;
    opacity: 1;
    animation: blink .7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.js"></script>
<div id="typed-strings">
                <p>Myself Big Bounty</p>
                <p>I'm a coder</p>
                <p>I'm ML enthusiast</p>
 </div>
 <div class="center">
    <span id="typed"></span>
 </div>