将容器垂直居中

时间:2018-09-21 07:41:18

标签: javascript html html5 twitter-bootstrap css3

我目前正在处理我的投资组合,并尝试垂直放置我的部分并使其具有响应能力。但是没有任何效果,我可以将它们水平居中,但是当我尝试使用位置:相对和顶部:50%时。什么也没发生。我将把我的代码和我的代码笔放在这里。

HTML:

<section id="intro">
        <div class="row">
          <div class="col-12">
            <div id="intro-cont">
              <h1>
                I'm Peter, an upcoming Front-End Developer, gamer and lo-fi lover.
              </h1>
              <a class="animated infinite bounce delay-10s" id="more" href="#about">More<br><i class="arrow down"></i></a>
            </div>
          </div>
        </div>
      </section>

css:

/*** Intro ***/

#intro{
  height: 90vh;
}

#intro-cont{
    text-align: center;
  positio
}

#intro-cont h1 {
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 30px;
  position: absolute;
  top: 30%;
  right: 0;
  left:0;
}

#intro-cont i {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  margin-bottom: 10px;
}

#intro-cont .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#intro-cont a {
  font-family: 'Gloria Hallelujah', cursive;
  text-decoration: none;
  color: black;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

奇怪的是,在Codenpen中它可以正常工作..但是在JSFiddle中,我的整个项目都在其中..

链接:

Codepen:https://codepen.io/Sarithan/pen/eLXzva

JSFiddle:https://jsfiddle.net/Sarithan/pgjehwbv/

1 个答案:

答案 0 :(得分:1)

您需要在#intro-contposition: relative;上设置高度,此功能才能起作用。 看到这个小提琴:https://jsfiddle.net/u85ekcg0/