在 H1 内使用跨度时，H1 不水平居中只是添加到右侧

如何解决在 H1 内使用跨度时，H1 不水平居中只是添加到右侧

我已经尽可能多地浏览了与此类似的帖子，但无济于事，我有一个以父“英雄”部分为中心的 H1，并希望在 H1 中包含一个跨度，以便所有文本居中（包括跨度）

当添加跨度时，它似乎从居中 H1 的右侧开始，而不是包含在整个 H1 的居中，这意味着它在较小的屏幕尺寸下被推离页面并且无法响应工作太好了。

.hero {
    text-align: center;
  }

.fadeIn{
    display: inline;
    text-indent: 5px;
}
.fadeIn span{
    animation: fadeEffect 12.5s linear infinite 0s;
    -ms-animation: fadeEffect 12.5s linear infinite 0s;
    -webkit-animation: fadeEffect 12.5s linear infinite 0s;
    color: #7387a5;
    opacity: 0;
    /*overflow: hidden;*/
    position: absolute;
}
.fadeIn span:nth-child(2){
    animation-delay: 2.5s;
    -ms-animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s;
}
.fadeIn span:nth-child(3){
    animation-delay: 5s;
    -ms-animation-delay: 5s;
    -webkit-animation-delay: 5s;
}
.fadeIn span:nth-child(4){
    animation-delay: 7.5s;
    -ms-animation-delay: 7.5s;
    -webkit-animation-delay: 7.5s;
}
.fadeIn span:nth-child(5){
    animation-delay: 10s;
    -ms-animation-delay: 10s;
    -webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-moz-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -moz-transform: translateY(0px); }
    10% { opacity: 1; -moz-transform: translateY(0px); }
    25% { opacity: 1; -moz-transform: translateY(0px); }
    30% { opacity: 0; -moz-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -webkit-transform: translateY(0px); }
    10% { opacity: 1; -webkit-transform: translateY(0px); }
    25% { opacity: 1; -webkit-transform: translateY(0px); }
    30% { opacity: 0; -webkit-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
    0% { opacity: 0; }
    5% { opacity: 0; -ms-transform: translateY(0px); }
    10% { opacity: 1; -ms-transform: translateY(0px); }
    25% { opacity: 1; -ms-transform: translateY(0px); }
    30% { opacity: 0; -ms-transform: translateY(0px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

<section class="hero" id="hero">
        <div class="container">
            <div class="header-and-subheader">
                    <!-- <h1>Measure your mental health</h1> -->
                    <h1>You measure your
                        <div class="fadeIn">
                            <span>fitness</span>
                            <span>sleep</span>
                            <span>weight</span>
                            <span>steps</span>
                            <span>calories</span>
                        </div>
                    </h1>
                    <h1 id="header-response"><em>...why not your mind?</em></h1>
     </div>
   </div>
</section>

也可以在此处找到代码片段：https://jsfiddle.net/347qmpnw/2/ 有什么想法吗？

解决方法

仅通过 css 动画就可以做到这一点非常好。我非常喜欢。

原因是，包装器 .fadeIn 不是块元素，没有宽度，也没有正确的定位。一个可能的解决方案是：

更改类 fadeIn 和 .fadeIn span 以修复定位，如果您建议标记的宽度，它将准备就绪。但是，如果您更喜欢“自动宽度”解决方案，则可以使用下面的一些小 JS，例如 (quick&dirty)：

.fadeIn{
    display: inline-block;
    position: relative;
    vertical-align: top;
    text-indent: 5px;
    /* optional set a fix width here */
}
.fadeIn span{
    animation: fadeEffect 12.5s linear infinite 0s;
    -ms-animation: fadeEffect 12.5s linear infinite 0s;
    -webkit-animation: fadeEffect 12.5s linear infinite 0s;
    color: #7387a5;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}

$spans = document.querySelectorAll('.fadeIn span');
let maxWidth = 0;
for(let i=0; i< $spans.length; i++){
    let actualWidth = $spans[i].offsetWidth;
    if ( actualWidth > maxWidth ) maxWidth = actualWidth;                                   
}
maxWidth = (maxWidth + 5) + 'px'; // not forget: text-indend
document.getElementsByClassName('fadeIn')[0].style.width = maxWidth;

,

您添加的跨度是绝对位置。这意味着它不会占用任何实际空间。

我确实知道您这样做是为了让文字重叠并提供漂亮的淡入淡出效果，但这也是您出现问题的原因。

如果您知道单词的平均宽度并将其作为右边距添加到您的 H1 以强制将其推到“中心”，则您可以“破解”它。在我在这里看到的文字中，您可以添加大约 70 像素，它看起来应该是正确的。

但我的猜测是您希望整个标题根据出现的单词移动。我想不出一个简单的 HTML/CSS 方法来做到这一点恐怕你需要一些 JS 来正确地做到这一点