テキストが別のdiv要素に移動します。ここでは、CSS

Question

はplunkrです：

問題、これは

https://plnkr.co/edit/HHsReAT6GLyNZTF4qOJj?p=preview

<div class="main-page"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-xs-6 welcome-text">Ankur Chavda</div> 
     <div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div> 
     </div> 
    </div> 
</div> 

をDIVあなたはplunkrにCSSクラスを見ることができるためです。

ありがとうございます。

Answer 1

から行の高さを削除します。

.main-page{ 
    background-color: #293b4d; 
    width: 100%; 
    height: 90vh; 
    /* text-align: center; */ 
    /* vertical-align: middle; */ 
    position:relative; 
} 
.holder { 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

し、別のdivを追加：あなたは本当にそれら二つのdiv elemntsあなたはこれを試すことができ、メイン・ページにあることを中心にしたい場合は

.main-page { 
    background-color: #293b4d; 
    width: 100%; 
    height: 90vh; 
    /* text-align: center; */ 
    /* vertical-align: middle; */ 
} 

"holder"という名前のクラスを持つ要素を、このような行の親として指定します。

<div class='holder'> 
    <div class="row"> 
     <div class="col-xs-6 welcome-text">Ankur Chavda</div> 
     <div class="col-xs-4 intro">Programmer, Singer Song-Writer, Football</div> 
    </div> 
</div> 

希望はうまくいきます。あなたが削除した場合、