如何在卡片末端垂直居中对齐项目(使用bootstrap 4)？
在Bootstrap 4中，可以通过使用justify-content-center类来实现卡片末端垂直居中对齐项目。具体步骤如下：
- 在卡片容器的父级容器上添加
d-flex类，以确保卡片容器成为一个弹性容器。 - 在卡片容器上添加
align-items-end类，以使卡片内的项目向底部对齐。 - 在卡片容器内部的项目上添加
mt-auto类，以将项目推到卡片底部。
下面是一个示例代码：
<div class="container">
<div class="card d-flex align-items-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush mt-auto">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</div>在上述示例中，使用container类来创建一个容器，包含一个带有卡片内容的card容器。通过将d-flex类添加到card容器的父级容器，使卡片容器成为一个弹性容器。然后，使用align-items-end类将卡片容器内的项目向底部对齐。最后，通过在项目列表上添加mt-auto类，将项目推到卡片底部。
以上是使用Bootstrap 4实现在卡片末端垂直居中对齐项目的方法。相关的腾讯云产品和产品介绍链接地址，可以参考腾讯云的相关文档和资源。
相关·内容
我有一个很长的bootstrap卡片，上面有两行信息，一个标题和一个描述。然后我想要一个按钮，对齐到这张卡的右侧，居中。我当前的按钮html如下所示： <div class="card card-body"> <p>The button should be central,value=".align-self-end">
<
浏览 12提问于2020-04-30得票数 1
回答已采纳
2回答
我正在使用Bootstrap 4 alpha 6，并尝试使用flexbox将等高卡的内容垂直居中。我已经使用了h-100 util类来使卡片具有列的完全高度。问题是我希望每个卡片的内容在中间对齐(垂直居中)。我尝试了在行中使用.align-items-center类，它可以使卡片居中，但随后卡片的高度不再相等…
浏览 23提问于2017-03-07得票数 4
回答已采纳
13回答
我正在尝试使用Bootstrap 4将我的Container放在页面的中间，到目前为止我还没有成功。任何帮助都将不胜感激。我在 Codepen.io 所以你们可以试着使用它，让我知道什么是有效的，因为我几乎没有想法了…… var currentAuthor = "";function
浏览 166提问于2017-02-15得票数 437
回答已采纳
这个问题在这里已经有答案了 ： 如何在div块中居中(水平和垂直)文本？ (27个答案) Bootstrap 4中的垂直对齐中心 (15个答案) 3天前就关门了。我正在尝试得到3个按钮与bootstrap4的一个大的在左边，和两个小的一个在另一个在另一个在右边，并正在与btn-组这样做。++-------+-------+ 如果我使用按钮，它工作得很好，但是当我使用<
浏览 33提问于2021-02-27得票数 -2
回答已采纳
我想在Bootstrap 4导航栏上放置一些自定义图标按钮。class="png-icon d-inline-block align-middle" src="assets/png-icons/zoom full.png">该按钮显示在导航栏上，但它在顶部对齐我想让它居中对齐(垂直)。我尝试了所有类型的CSS样式，如页边距-顶部和填充-顶部，但它没有改变任何东西。我也试过
浏览 18提问于2017-06-28得票数 0
回答已采纳
1回答
我正在尝试垂直对齐我的登录屏幕。，并使用css display: -ms-flexbox; display: flex;align-items: center;我不会让我的项目垂直居中。我将无法实现它，因为我使用bootstrap类来水平居中。
浏览 0提问于2016-04-11得票数 7
回答已采纳
在我的VueJS应用程序中使用bootstrap-vue，我想在一行中放置一个按钮和一个警告，两个项垂直居中对齐。如何对齐所有项目？
浏览 1提问于2020-12-23得票数 0
3回答
如何在动态div中垂直对齐按钮
、、、、
我想使用bootstrap在div中居中放置垂直对齐的按钮 <div class="col-xs-2"> </button>
浏览 1提问于2013-10-29得票数 13
3回答
我正在开发一个bootstrap风格的网站，我有文本需要居中。我已经使用center align将它在水平维度居中，但我不知道如何在行中垂直居中。</p>“align=”center“”负责水平对齐，但我不知道如何将文本放在行的绝对中心。
浏览 5提问于2014-05-02得票数 2
4回答
我有一个网页，使用的引导4测试版。在这个页面中，我有一个内联列表。我希望每个列表项目的内容是垂直居中的，所以项目对齐。如本所示，它们目前处于偏离中心位置。我使用以下代码： <li class="list-inline-item"><h2>Hell
浏览 3提问于2017-08-25得票数 6
回答已采纳
3回答
我想知道，当涉及到在标题框中对齐文本("CONSOL概述“)而不是在标题框中左对齐时，是否有人可以帮助解决这个问题。
浏览 0提问于2018-10-20得票数 1
我试着在页面上把卡片居中，但它不是垂直的。
我已经在堆栈上尝试了所有的想法，但是没有一个可行的解决方案。
浏览 0提问于2019-06-08得票数 0
回答已采纳
使用时，我希望能做到以下几点：<div class="row"> <h1>Bootstrap starter template</h1></p></div>...would生成居中文本。
但是，它仍然出现在最左边。我做错了什么？
浏览 4提问于2012-02-08得票数 584
回答已采纳
如何使用CSS使加号在圆圈内水平和垂直居中？span id="container">+</span>这是一个jsfiddle：
请注意Bootstrap css包含在小提琴中，因为我在我的项目中使用它。如果我将
浏览 605提问于2015-11-18得票数 16
回答已采纳
我知道这已经被问了一千次了，但我找不到一种方法来使文本和图像垂直居中。有人能帮我解决这个问题吗？
谢谢。
浏览 2提问于2013-11-16得票数 69
回答已采纳
我的图像目前没有垂直居中，我似乎无法修复它。<Grid> <Col md={6} md={4} > </div> <Col md={6} md={4
浏览 0提问于2017-06-25得票数 2
我有一个使用Bootstrap 4列(col-sm)的三列布局。请参阅codepen：https://codepen.io/anon/pen/EryRJL?如何在列底部垂直对齐所有按钮，同时使它们在各自的列中居中？button-container { position:absolute; text-align: center;
} 但是<em
浏览 18提问于2019-01-29得票数 0
3回答
如何在两列中垂直和水平居中显示文本？我使用的是bootstrap 4。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css
浏览 0提问于2017-06-27得票数 0
在使用应用的flex-列属性时，我试图用对齐内容对项目进行垂直居中。对齐-条目按其应有的方式工作，但内容不响应Y轴。我有对齐项目注释掉，我不想中心X轴，只是Y轴。 font-size: 48px;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap</em
浏览 4提问于2020-02-03得票数 0
回答已采纳
1回答
我正在尝试使用boostrap4来创建一个卡片标题，标题是卡片标题的文本对齐中心，一个图标是右对齐的，两个都垂直居中+++++++++++++++++
浏览 3提问于2018-03-22得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
