Zentrierter Text am unteren Ende des div-Containers

Kann mir jemand erklären, wie ich meinen Text am unteren Rand des div-Containers zentriere?Zentrierter Text am unteren Ende des div-Containers

<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>

Ich versuche zu bekommen "Erfahren Sie mehr über das, was ich tue" am Ende der "Welcome-Header" -Reihe.

CSS:

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

.page-scroll { 

} 

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

Sorry Leute u Sie mich nicht falsch. Ich möchte, dass die Saite unten wie unten bleibt: 0px;

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

Quelle

2017-03-14 robertbie

mir sieht aus wie "mehr darüber erfahren, was ich tue" ist am unteren Rand des # welcome-Header? http://codepen.io/anon/pen/PpKObE –

@look bearbeiten bitte – robertbie

hinzufügen position: relative-#welcome-header dann position: absolute; bottom: 0; left: 0; right: 0-.page-scroll am unteren Rand des #welcome-header das Element zu positionieren und Ihre text-align: center Regel wird der Text horizontal zentriert.

@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>

Quelle

2017-03-14 18:20:31

Super! Vielen Dank ! – robertbie

@robertbie np :) –

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

Quelle

2017-03-14 18:04:54 HisPowerLevelIsOver9000

Ich meine, der Text muss am unteren und mittleren zur gleichen Zeit sein. – robertbie

@robertbie ist bereits das letzte Element in diesem Containerelement. Es ist schon unten? – HisPowerLevelIsOver9000

@look bearbeiten bitte – robertbie

Zentrierter Text am unteren Ende des div-Containers

Antwort

Verwandte Themen