如何將我的 btn 按鈕垂直和水平放置在兩個影像的中間？我正在努力實作這一目標：
這是我的按鈕<a href="#" role="button">Link example</a>，我正在使用最新版本的 bootstrap 5。
我的代碼
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-lg-6">
<a class="btn btn-primary" href="#" role="button">Link example</a>
<img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
<a class="btn btn-primary" href="#" role="button">Link example</a>
<img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
</div>
<div class="col-lg-6">
//other code
</div>
</div>
</div>uj5u.com熱心網友回復：
添加d-flex align-items-center justify-content-center到您的內部容器 div 的類中。
d-flex 是 bootstrap 的實用程式：https ://getbootstrap.com/docs/4.0/utilities/flex/
align-items-center 將垂直對齊， justify-content-center 將垂直對齊
uj5u.com熱心網友回復：
檢查中心元素，您還需要將每個影像和按鈕對移動到其單獨的容器中：
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<div class="container">
<div class="row">
<div class="col-lg-6 position-relative mb-5">
<a class="btn btn-primary position-absolute position-absolute top-50 start-50 translate-middle" href="#" role="button">Link example</a>
<img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
</div>
<div class="col-lg-6 position-relative">
<a class="btn btn-primary position-absolute position-absolute top-50 start-50 translate-middle" href="#" role="button">Link example</a>
<img src="https://via.placeholder.com/1920x1080.jpg" class="rounded img-fluid">
</div>
<div class="col-lg-6">
//other code
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/419163.html
標籤：
上一篇：如何使單選按鈕背景和邊框顏色不同
下一篇：向左移動側邊欄