我正在嘗試將我的專欄內(nèi)容垂直居中。<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><div class="container d-flex h-100"> <div class="row mt-5 "> <div class="col-sm-7 about-us"> <div class="row h-100 justify-content-center align-items-center"> <h3 class="display-3 strong "> {{ __('Message From Chief ') }} </h3> <p> {{ __('This is a sample text') }} </p> </div> </div> <div class="col-sm-4"> <img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt=""> </div> </div></div><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>但是當(dāng)我嘗試上面的代碼時(shí)，它在標(biāo)題和段落之間給了我一個(gè)巨大的差距。那么我怎樣才能正確地將我的文本垂直居中對齊以及我在這里做錯(cuò)了什么我正在使用 Bootstrap 4 和 Laravel。
2 回答
偶然的你
TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊
只需添加min-vh-100您的.container班級并添加align-content-center您的row班級即可。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container d-flex min-vh-100">
<div class="row">
<div class="col-sm-7 about-us">
<div class="row h-100 justify-content-center align-items-center align-content-center flex-column">
<h3 class="display-3 strong ">Message From Chief</h3>
<p>This is a sample text</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
梵蒂岡之花
TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊
只需添加.h-100您的 .container 類，添加.h-100您的 row 類并添加.my-auto您的 col 類。
<div class="container h-100">
<div class="row h-100">
<div class="col-sm-7 about-us my-auto">
<div class="row h-100 justify-content-center align-items-center">
<h3 class="display-3 strong ">
{{ __('Message From Chief ') }}
</h3>
<p>
{{ __('This is a sample text') }}
</p>
</div>
</div>
<div class="col-sm-4">
<img src="{{asset('img/user.jpg') }}" class="img img-fluid" alt="">
</div>
</div>
</div>
- 2 回答
- 0 關(guān)注
- 157 瀏覽
添加回答
舉報(bào)
0/150
提交
取消