光标未与文本对齐

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>

Answer 2

只需将span与div举行.center课程一起打包，您也不必将top和left 放在他们身上导致问题将其替换为text-align: center

.center {
    position: relative ;
    text-align: center;
    /* Remove top and left */
    /*top:  50%;*/
    /*left: 50%;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    /* color: #ffffff; */
  }

＆＃13;

＆＃13;

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
        });

＆＃13;

.center {
    position: relative ;
    text-align: center;
    /*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;
    }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;