时间戳

首页 > 解决方案 > 在 H1 内使用跨度时，H1 未水平居中（仅添加到右侧）

html - 在 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/有什么想法吗？

标签： htmlcsscentering

解决方案

仅通过 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;

推荐阅读