光标未与文本对齐答案

【问题标题】：Cursor not aligning with the text光标未与文本对齐
【发布时间】：2017-11-19 11:12:19
【问题描述】：

我已经编写了一个 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>

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

【问题讨论】：

标签： javascript jquery html css typed.js

【解决方案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>

【讨论】：

不删除 left: 50% 文本不会居中
OP没有说任何关于居中的事情，只是光标对齐的问题
我没有注意到，我的错对不起:)

【解决方案2】：

只需将span 包装成div 持有.center 类，您也不必将top 和left 它们导致问题替换为@ 987654326@

.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; */
  }

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

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

【讨论】：

您对 text-align 的使用使 div 向上移动。实际上，我正在使它出现在背景 div 上。所以，top 和 left 是必需的
这是有道理的，因为你没有在你的问题中提到这一点