bootstrap5中,d-flex布局 justify-content-center 中怎么纵向居中放置两个card
时间: 2023-06-01 11:07:12 浏览: 58
要想在 Bootstrap 5 中使用 d-flex 布局的 justify-content-center 类将两个 card 纵向居中放置,可以将它们放在一个父容器里面,然后给这个父容器设置居中样式,比如:
```html
<div class="d-flex justify-content-center align-items-center vh-100">
<div class="card mx-2">
<!-- card 内容 -->
</div>
<div class="card mx-2">
<!-- card 内容 -->
</div>
</div>
```
这里使用了 vh-100 类使父容器铺满整个视口,然后给它添加了 d-flex 和 justify-content-center 类使内部的 card 纵向居中。另外还添加了 align-items-center 类来让卡片水平对齐。然后在父容器内分别放置两个卡片即可。
相关问题
bootstrap5中的d-flex align-items-center mb-3
`d-flex` 是 Bootstrap 5 中的一个 CSS 类,用于设置一个元素为 Flex 布局,并使其子元素水平排列。`align-items-center` 则是用于设置 Flex 布局中的垂直居中对齐方式。
`mb-3` 则是用于设置元素的 margin-bottom,值为 3 个单位(根据具体情况可能是 px、rem 等)。
综上所述,`d-flex align-items-center mb-3` 是将一个元素设置为 Flex 布局,使其子元素水平排列,并在垂直方向上居中对齐,同时在底部留出 3 个单位的 margin-bottom。
bootstrap5中的d-flex align-items-center mb-3代码
以下是一个使用 `d-flex align-items-center mb-3` 的示例代码:
```html
<div class="d-flex align-items-center mb-3">
<img src="path/to/image.jpg" alt="Image" class="me-3">
<div>
<h5 class="mb-0">标题</h5>
<p class="mb-0">描述</p>
</div>
</div>
```
上述代码中,`d-flex align-items-center mb-3` 被应用到一个 `div` 元素上,该元素包含了一个图片和一个文本块。`align-items-center` 使得图片和文本块在垂直方向上居中对齐,`mb-3` 则在该元素下方留出了 3 个单位的 margin-bottom。