html - CSS/HTML - 元素未居中

Question

我有一个对象，不久前它会以一个 opacke 框为中心，它会淡入。我的问题是现在文本在 Angular 落里，框不见了。我不确定为什么。一切似乎都符合 css 定位看起来很好等。如果有人能帮我弄清楚为什么该元素不再居中，周围有一个框，那就太好了。你可以看一个例子 here (向下滚动到最后一张幻灯片，联系我页面)

您可以看到框的 css 和下面文本的 css。

文本 CSS:

#slide4 .contact{
     color: red;
     position: relative;
     font-size:70px;
     top: 30px;
     left: 36%;
}
#slide4 .contact1{
     color: rgba(51,51,51,.3);
     position: relative;
     font-size: 40px;
     top: 100px;
     left: 8%;
}
#slide4 .contact2{

    position: absolute;
    font-size: 40px;
    top: 140px;
    right: 21%;
        color: rgba(51,51,51,.3);
}
#slide4 .box{
        position:relative;
    width: 400px;
        height: 200x;
    padding-right: 25px;
    padding-left: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
        background: rgba(255,255,255,.9);
    top: 100px;
    left: 32%;
    opacity: 0;
    filter:alpha(opacity=0);
}

框 CSS:

    <div class="box">
    <span class="contact1">This is a test</span>
    <span class="contact2">This is a test</span></div>
    </div>

那么让我再总结一下我的问题，为什么这个框没有与文本一起居中，而文本应该有一个不再存在的漂亮字体。

Answer 1

当我在 Chrome 中执行 Inspect Element 时，它没有找到 slide4 相关的 CSS 属性。按照下面的建议更新您的 CSS style.css，

/******************************
 SLIDE 3 
*******************************/
#slide3{
    background-color:#b6c10b;
}
#slide3 .text{
    position: relative;
    top: 35px;
    left: 505px;
    font-size: 35px;
    color: rgba(51,51,51,0.3);opacity: .3;}    ~~> remove } as its extra

} 

a:link {color:#333333;
opacity: .3;}    
a:visited {color:#333333;    ~~> add } as its missing
a:hover {color:#333333;
opacity: .3;} 
a:active {color:#333333;
opacity: .3;}