文字移动到不同的div：css

Question

以下是plunkr：

问题在于这个div

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>

你可以在plunkr中看到css类。

提前致谢。

Answer 1

从以下位置删除行高：

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

如果你真的希望这两个div元素集中在主页上你可以试试这个：

.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元素，其类名为＆＃34; holder＆＃34;作为这样的行的父级：

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

希望能奏效。

以下是截图：