我怎样才能中心div在视差背景图像

  • Z时代
  • 2024-01-10
  • 分类：问答

我想水平和垂直居中div与视差背景图像。我试过bootstrap 4类d-block,mx-auto,text-center。它将其水平居中，但不是垂直居中。我怎样才能让它垂直居中呢？我怎样才能中心div在视差背景图像

.parallax_bg {  
background: url(assets/img/corinne-kutz-211251.jpg);  
background-size: cover;  
    height: 100%;  
    min-height: 100%;  
    overflow: auto;  
}  
.parallax {  
    background-attachment: fixed;  
    background-size: cover;  
    background-repeat: no-repeat;  
}  
.parallax_text > p {  
    font-size: 20px;  
}

<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block">  
    <div class="parallax_text">  
    <h3><em>Venenatis Nisl Porta</em></h3>  
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p>  
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>  
    </div>  
</section>

回答：

只是适用position: relative到parallax类，然后应用下面的CSS到parallax_text类：

.parallax_text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) 
}

回答：

你可以试着弯曲这样的：

.parallax_bg {  
    background: url(https://lorempixel.com/400/400/);  
    background-size: cover;  
    height: 100%;  
    min-height: 100%;  
    overflow: auto;  
}  
.parallax {  
    background-attachment: fixed;  
    background-size: cover;  
    background-repeat: no-repeat;  
    height: 120vh;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  
.parallax_text {  
    background: #fff;  
}  
.parallax_text>p {  
    font-size: 20px;  
}

<section data-stellar-background-ratio="0.5" class="parallax parallax_bg text-center mx-auto d-block">  
    <div class="parallax_text">  
    <h3><em>Venenatis Nisl Porta</em></h3>  
    <p>Lorem vestibulum gravida ipsum non velit aliquam</p>  
    <a class="btn btn-primary mt-3" href="#">Read More&nbsp;<i class="fa fa-angle-double-right" aria-hidden="true"></i></a>  
    </div>  
</section>

以上是 我怎样才能中心div在视差背景图像 的全部内容， 来源链接： utcz.com/qa/261781.html

回到顶部