Question

有人可以解释一下我如何将我的文本放在div容器的底部？

<div class="container-fluid">
        <header id="welcome-header" class="row">
            <div id="welcome-div">
                <a href="#" class="home-logo"><img src="img/logo.png" alt="logo"></a>
                <h1 class="welcome-text">
                    <span>Hi, I'm Robert. I design & build</span>
                    <br>
                    <span class="welcome-text-animation"></span>
                </h1>
                <div class="hire-button">
                    <a href="footer">Yes, I'm available for hire</a>
                </div>
                <div class="page-scroll ">
                    <a href="#welcome-div">
                        Learn more about what i do
                        <br>
                        <i class="fa fa-chevron-down"></i>
                    </a>
                </div>
            </div>        
        </header>

我想要了解更多关于我做的事情＆＃34;在＆＃34; welcome-header＆＃34;的底部行。

CSS：

#welcome-div {
    min-height: 100%;
    position: relative;
}

.page-scroll {   

}

.page-scroll a {
    font-family: Sansita; 
    text-decoration: none;
    font-size: 20px;
    color: aliceblue;
}

对不起，伙计们，我误会了。我希望字符串像底部一样粘在底部：0px;

http://codepen.io/anon/pen/jBLaBX

Answer 1

.page-scroll {  
   text-align:center;  
 }

Answer 2

将position: relative添加到#welcome-header，然后position: absolute; bottom: 0; left: 0; right: 0添加到.page-scroll，将元素定位在#welcome-header的底部，您的text-align: center规则将将文本水平居中。

@import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
  width: 100%;
  height: 100vh;
  background-image: url(img/background.jpg);
  position: relative;
}

.welcome-text,
.welcome-text-animation {
  font-family: Sansita;
  text-align: center;
  color: aliceblue;
  font-size: 50px;
  padding-top: 90px;
}

.home-logo {
  display: block;
  text-align: center;
}

.home-logo img {
  display: inline-block;
  padding: 2.5%;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.hire-button {
  text-align: center;
  padding-top: 90px;
}

.hire-button a {
  font-family: Sansita;
  text-decoration: none;
  color: aliceblue;
  font-size: 25px;
  border: 2px solid #FDCD3B;
  border-radius: 50px;
  padding: 1.2%;
  transition: all 0.2s linear;
}

.hire-button a:hover {
  background-color: #FDCD3B;
  color: #2A3A3F;
  padding-left: 3%;
  padding-right: 3%;
}

#welcome-div {}

.page-scroll {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.page-scroll a {
  font-family: Sansita;
  text-decoration: none;
  font-size: 20px;
  color: black;
}

<body>
  <div class="container-fluid">
    <header id="welcome-header" class="row">
      <div id="welcome-div">
        <a href="#" class="home-logo"><img src="img/logo.png" alt="logo"></a>
        <h1 class="welcome-text">
                    <span>Hi, I'm Robert. I design & build</span>
                    <br>
                    <span class="welcome-text-animation"></span>
                </h1>
        <div class="hire-button">
          <a href="footer">Yes, I'm available for hire</a>
        </div>
        <div class="page-scroll ">
          <a href="#welcome-div">
                        Learn more about what i do
                        <br>
                        <i class="fa fa-chevron-down"></i>
                    </a>
        </div>
      </div>
    </header>

    <section id="about" class="row">
      ABOUT CONTENT
    </section>

    <section id="skills" class="row">
      SKILLS CONTENT
    </section>

    <section id="portfolio" class="row">
      PORTFOLIO CONTENT
    </section>

    <section id="contact" class="row">
      CONTACT CONTENT HERE
    </section>
  </div>
</body>

div容器底部的中心文本

2 个答案: