开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在卡片末端垂直居中对齐项目(使用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 4中居中对齐分页？如何使用bootstrap 4垂直对齐文本 Bootstrap 4 Flexbox -将多列与项目居中对齐如何在Bootstrap 4中垂直对齐导航栏切换？如何在Bootstrap 4中垂直对齐图像覆盖卡？bootstrap 4更改导航栏高度导致导航栏项目不垂直居中如何在使用bootstrap 4时右对齐按钮如何在bootstrap 4中垂直对齐表单行类中的按钮在bootstrap 4中，使用站点上的导航栏将元素垂直居中如何在Bootstrap 4中使列根据视区水平或垂直对齐？尝试使用bootstrap在大显示器上水平对齐项目，在小显示器上垂直对齐项目 Bootstrap 4居中项目只在小的视口上，但没有对齐每一个其他大小？如何在使用react bootstrap时将列中左侧的项目对齐？如何在不影响导航栏高度的情况下在Bootstrap 4导航栏导航项目中创建居中和下方的小文本对齐图标？如何在全尺寸的jumbotron中使用bootstrap 4居中显示一些文本，并为div或p容器设置最大宽度？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

python测试开发django-156.bootbox 垂直居中（上下居中）

bootbox 和 bootstrap modal模态框一样，默认在屏幕上方，左右居中显示。这是老外的习惯，我们一般喜欢上下居中，显示在屏幕中央。

04

「css基础」Transforms 属性在实际项目中如何应用？

关于Transform变形属性大家都不陌生吧，可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等，你也许已经很熟悉了这些属性，或许你也会有这样的困惑，这些属性在实际项目中如何应用呢？

00

「css基础」Transforms 属性在实际项目中如何应用？

关于Transform变形属性大家都不陌生吧，可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等，你也许已经很熟悉了这些属性，或许你也会有这样的困惑，这些属性在实际项目中如何应用呢？

03

轻松掌握RelativeLayout相对布局

在前面三期中我们对LinearLayout进行了详细的解析，LinearLayout也是我们用的比较多的一个布局。但在实际开发中使用LinearLayout远远不够，我们本期一起来学习RelativeLayout。一、认识RelativeLayout RelativeLayout，又叫相对布局，使用<RelativeLayout>标签。相对布局通常有两种形式，一种是相对于容器而言的，一种是相对于控件而言的。下表显示了RelativeLayout支持的常用XML属性及相关方法的说明

07

一次性把所有普通和经典的网页布局讲得通通透透的，多图预警，建议收藏

超干货长文预警。这次把网页布局方案讲得通通透透的，等高布局，水平垂直居中，经典的圣杯布局等等全都有了。建议收藏

01

动画 | 一文掌握 Flex 布局

网页布局，是前端入门的时候必学、必须熟练的一门技术，学到什么程度算是入门了呢？随便给你一个网站，你就可能快速的分析出网页的结构，然后搭建出模型，这是前端网页布局入门的最基本要求。

04

Flex快速上手

Flex之于 CSS3 就如Promise之于 ES6，都解决了开发者的痛点问题，大大提高了生产力。借助Flex，可以轻松实现栅栏布局、水平/垂直居中、自定义排列方向和顺序等等需求。

02

CSS flex样式垂直居中

由于div默认是没有高度的，如果设置了高度，默认是从左到右，从上到下的顺序来排布；

01

最全总结，CSS实现居中的方式全部方式

利用text-align: center可以实现在块级元素内部的行内元素水平居中。此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。

01

div内图片和文字水平垂直居中「建议收藏」

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很多写css的人都研究过，或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法，用font-size解决IE下垂直居中的问题，是个好方法吗？是的，方法是不错，可是问题也很多：不支持img外标签的浮动，致使多图片排列时需添加额外标签；需要记住一些比例参数，上手较难；原理艰深，兼容性不稳定等。但是在我看来，这个方法不足够好！本文将提供两种更为新颖的方法，代码简洁，原理简单，上手容易，兼容性强，出错率低的方法。inline-block裸标签对齐法，以及透明图片拉伸对齐法。 css是如此的精深，我相信后来人会有更加绝妙的方法。但是，本文提供的几种实现图片垂直居中方法，一定是目前最实用的几种方法。

02

CSS十问之元素居中

大家好，我是柒八九。从今天起，我们又重新开辟了一个新的领域：CSS串讲。(毕竟在Web 领域，CSS也是有举足轻重的作用)在该系列文章中，我们会一起学习「元素居中」、「层叠上下文」还有一些在面试中比较常见的问题及一些在工作中遇到比较好玩的点。

01

Android基础篇 RelativeLayout.LayoutParams

（2）参数 new RelativeLayout.LayoutParams()需要填写宽度和高度两个参数

01

CSS垂直居中的七个方法

设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline，inline-block），例如单行的标题，或者已经设置inline-block属性的div，若将line -height设成和高度相同的数值，则内容的行内元素就会被垂直居中，因为是行高，所以会在行内元素的上下都加上行高的1/2，所以就垂直居中了！不过由此就可以抛光，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间隔会变超大，就不是我们所期望的效果了。CSS示例：

03

高度不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。

02

【基础】这15种CSS居中的方式，你都用过哪几种？

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

07

【前端】CSS : 对齐、居中

文本、元素的对齐和居中在开发中经常会用到。本文分别对文本、元素的对齐、居中进行介绍

02

学习纲要：CSS 布局

学习条件掌握了 CSS 的选择器、属性和值。学习目标了解 display 属性的可选值有哪些，分别代表什么意思。知道行内元素和块级元素的区别。会使用 Flex，inline-block 进行常用页面的布局。了解用 Float 来布局。知道如何清除浮动。知道相对定位（position：relative），绝对定位和固定定位的区别，以及什么时用。知道 z-index 的用途。知道如何让文字水平居中。知道如何让单行和多行文字垂直居中。学习资源学习 CSS 布局 Flex 布局 Flex 布

01

CSS水平和垂直居中技巧大梳理

auto只有在块级元素设置了宽度width才有效(块级元素不设宽度默认就占整行了，所以是废话)

03

第212天：15种CSS居中的方式，最全了

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。

01

前端CSS Flex布局8大重难点知识，收藏起来吧

Flex 布局将成为未来布局的首选方案。这也是学习前端必须掌握的主流布局方案！今天给大家分享一下 Flex 布局的 8 大重难点知识。

01

css布局 - 垂直居中布局的一百种实现方式（更新中...）

1. line-height行高简单粗暴实现法：line-height：Npx（N = 与元素高度相同的值）

01

17个场景，带你入门CSS布局

CSS 布局本质就是控制元素的位置和大小。比如这样的布局：元素宽960px，水平居中。宽960px是大小。水平居中是位置。又如这样的布局：两个元素在一行，左侧元素固定宽200px，右侧元素撑满剩余空间。固定宽200px，撑满剩余空间是大小。两个元素在一行是位置。

02

探秘 flex 上下文中神奇的自动 margin

水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了：

04

Unity3D关于Text方面的类

TextAlignment 多行文本应该如何被对齐这个是被GUIText.alignment属性使用参见：GUI Text component 值 Left 文本行左对齐 Center 文本行居中对齐 Right 文本行右对齐 TextAnchor 文本的锚点被放置在什么位置这个是被GUIText.anchor属性使用参见：GUI Text component 值 UpperLeft 文本被锚点在左上角 UpperCenter 文本被锚点在上边，垂直居中 UpperRight 文本被锚点在右上角 MiddleLeft 文本被锚点在左边，垂直居中 MiddleCenter 文本在水平和垂直方向上居中 MiddleRight 文本被锚点在右边，垂直居中 LowerLeft 文本被锚点在左下角 LowerCenter 文本被锚点在下边，垂直居中 LowerRight 文本被锚点在右上角 TextClipping GUI系统处理过大文本的以适合所分配矩形的方式值 OverDow 文本随意浮动在该元素之外 Clip 文本被裁剪以便放置在该元素之内

02

一篇文章带你了解CSS对齐方式

当使用 position对齐元素时, 总是定义 margin 和 padding 为 <body> 元素. 这是为了避免不同浏览器的视觉差异。

01

【垂直居中高级篇】你不知道的垂直居中方式

在Css中对元素进行水平居中是很简单的，如果他是一个行内元素，对它的父元素应用text-align:center；如果是一个块级元素，就对自身应用margin:auto。然而如果要对一个元素进行垂直居中，想想就头皮发麻。本文主要探索以Css3为基础进行元素的垂直居中，对当下流行的几种技巧不做讨论，原因如下：表格布局法：需要用到一些冗余的HTML元素行内块法：这个方法Hack味道过浓。一、基于绝对定位的垂直居中以下两种技巧都需要使用绝对定位 calc实现内容部分必须固定宽和高 tra

08

【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ;

02

bootstrap5基本使用

container是最基本的布局。给一个元素的class赋值为container之后，如果显示屏幕小于576，元素将要横向占满屏幕，但是大于576小于576像素的时候，宽度恒定为540,。就是说你的屏幕很宽的时候，元素永远不会横向占满整个屏幕，与边距有孔隙。但是赋值为.container-fluid的时候，元素永远横向占满屏幕，不会留有孔隙。

03

python测试开发django-123.bootstrap模态框(modal)垂直居中显示

bootstrap 模态框默认会在屏幕顶端显示，跟我们的操作习惯不太符合，我们期望显示到屏幕垂直居中的位置。在最新的 bootstrap4 版本中可以在

上加一个 modal-dialog-centered 属性，来垂直居中显示。但是大部分用的是bootstrap3 版本，需要自己写javascript脚本来调整位置。

03

14种CSS实现水平或垂直居中的技巧

css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。

03

不定宽高div水平垂直居中(兼容ie6)

不定宽高div水平垂直居中解决方法有很多，JS是最能够确保各种浏览器中一致性的，但是仍然可以使用CSS的方式来解决。

04

【CSS】vertical-align 垂直对齐 ( 块级元素对齐 | 行内元素 / 行内块元素对齐 | 基线对齐 | 垂直居中 | 顶部对齐 | 底部对齐 )

vertical-align 垂直对齐 , 不能用于块级元素 , 只能用于行内元素 / 行内块元素 ;

03

【CSS】202-23个CSS垂直居中技巧汇总

来自：CSS可樂，作者：@Amos 来自：http://csscoke.com/2018/08/21/css-vertical-align/ @CSS coke，一個熱愛CSS的開發者的筆記部落格，站

03

实现HTML元素垂直居中的六种方法

一、 img的垂直水平居中使用到的重要样式属性display,vertical-align vertical-align:middle这个属性是对table元素垂直居中起作用，如果想使用在img元素上，就注意下面的display设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .mai

02

14种CSS实现水平或垂直居中的技巧

css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。

01

CSS Flexbox 布局完全指南（一）：4000字，多示例讲解

理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。

02

【CSS】使用固定定位实现顶部导航栏 ( 核心要点 | 固定定位元素居中设置 | 代码示例 )

然后 , 左侧广告栏高度为 300 像素 , 顶部在中线位置 , 向上移动 150 像素即可使真个广告栏居中设置 ;

05

像素眼是怎样炼成的

传说的像素眼，也就是可以快速分辨出 1px 以上差异的双眼，往往由资深设计师所 get√，小鸡君本人是个苦逼程序员，但小鸡君的像素眼也不比任何一个设计师差。

04

多个你不知道的 CSS 居中方案！

要使内联元素（如链接，span 或img）居中，使用 text-align: center 足够了。

03

css常规水平居中&&垂直居中方案

无论水平居中还是垂直居中相信你并不陌生，但有多少种实现方式，每种的优劣以及兼容性相信你并不清楚。

02

初识flex布局

弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。使用方法：父元素设置display:flex

01

【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )

绝对定位不能通过设置 margin: auto; 样式的方式 , 设置盒子模型水平居中 ;

04

flex布局以及实现垂直居中

给父盒子添加flex属性，来控制盒子的位置和排列方式（当我们给父元素设置为flex布局以后，子元素的float、clear和vertical-align属性将失效） flex:布局又叫伸缩布局，弹性布局，伸缩盒布局，flex布局 flex常见的父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap flex常见的子项属性 flex子项目占的分数 aglin-self控制子项目自己在侧轴的排列方式 order属性定义子项的排列顺序（前后顺序）

01

「css实用手册」CSS 垂直居中的七种方法，值得收藏

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

02

「css实用手册」CSS 垂直居中的七种方法，值得收藏

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

03

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

05

利用vertical-align:middle实现在整个页面居中

如果想让一个div或一张图片相对于整个页面居中，用vertical-align:middle可以很简单地解决。

01

各种CSS居中方案

页面居中，各种元素居中是我们开发是很常见的情况，下面就来讨论下水平居中，垂直居中以及水平加垂直居中都有哪些常见的方案。我们的目标是对齐下面这两个div:

05

css实用手册」CSS 垂直居中的七种方法

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会用到的高频CSS相关方法归纳到这个手册里（有的内容可能来源其它作者），欢迎你持续的订阅和关注。

01

居中对齐两个难点的实现

注：vertical-align 作用单元格时，才生效，所以一般会结合dispaly: table-cell ; 一起使用才有效果

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭