我正在嘗試將我的專欄內容垂直居中。<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/[email protected]/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>但是當我嘗試上面的代碼時，它在標題和段落之間給了我一個巨大的差距。那么我怎樣才能正確地將我的文本垂直居中對齊以及我在這里做錯了什么我正在使用 Bootstrap 4 和 Laravel。
2 回答
偶然的你
TA貢獻1841條經驗 獲得超3個贊
只需添加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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
梵蒂岡之花
TA貢獻1900條經驗 獲得超5個贊
只需添加.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 關注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消