html - 文本移动到不同的 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%);
}

然后添加另一个名为“holder”的 div 元素作为该行的父元素，如下所示:

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

希望能奏效。

截图如下: