我正在尝试使用 align-items-stretch 来拉伸 div 的背景并使用 align-items-center 来使内容居中(垂直!)。不知何故,当我使用很长的标题时,不会应用 align-items-center。
我做错了什么?
更新:添加了自己风格的 CSS + 源代码特定的引导程序 更新:当我应用 inline min-height 时,内容将垂直居中(这很好)。
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters align-items-center">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 tile-product-content-horizontal" style="min-height:300px;">
<div class="col-12 ">
<span class="brand"> Brand name </span>
<h3> Short title </h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters align-items-center">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 tile-product-content-horizontal" style="min-height:300px;">
<div class="col-12 ">
<span class="brand"> Brand name </span>
<h3> This is a very long title which stretches the div </h3>
</div>
</div>
</div>
</div>
</div>
CSS:
.tile-product-content-horizontal {
padding: 20px 40px 20px 5px;
}
.tile {
border-radius: 16px;
background-color: #FFF;
margin-bottom: 20px;
background-image: url(assets/card-chevron.png);
background-repeat: no-repeat;
background-position: right 30px center;
}
/* BOOTSTRAP SPECIFIC */
.align-items-stretch {
align-items:stretch !important
}
.align-items-center {
align-items:center !important
}
.d-flex {
display:flex !important
}
答案 0 :(得分:1)
您需要垂直排列列,然后垂直对齐它们的内容。
做这些:
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters h-100">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 d-flex align-items-center" >
<div class="tile-product-content-horizontal">
<span class="brand"> Brand name </span>
<h3> This is a very long title which stretches the div </h3>
</div>
</div>
</div>
</div>
</div>
.tile-product-content-horizontal {
padding: 20px 40px 20px 5px;
}
.tile {
border-radius: 16px;
background-color: #FFF;
margin-bottom: 20px;
background-image: url(assets/card-chevron.png);
background-repeat: no-repeat;
background-position: right 30px center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters h-100">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 d-flex align-items-center">
<div class="tile-product-content-horizontal">
<span class="brand"> Brand name </span>
<h3> Short title </h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 grow d-flex align-items-stretch">
<div class="col-12 tile elevation-1">
<div class="row no-gutters h-100">
<div class="col-12 col-md-4">
<div class="col-12">
<img src="https://via.placeholder.com/512" alt="" class="img-fluid tile-image">
</div>
</div>
<div class="col-12 col-md-8 d-flex align-items-center">
<div class="tile-product-content-horizontal">
<span class="brand"> Brand name </span>
<h3> This is a very long title which stretches the div </h3>
</div>
</div>
</div>
</div>
</div>