在Bootstrap4中使用垂直居中

最新推荐文章于 2024-07-27 06:15:27 发布
最新推荐文章于 2024-07-27 06:15:27 发布
阅读量1.8w 收藏 3
点赞数 1
分类专栏： 网站相关 前端开发 文章标签： Bootstrap4 Bootstrap HTML CSS Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanxiang01/article/details/80723047
版权

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

Bootstrap4下载地址：>>点我下载<<

在制作页面时，当我们需要div或者图片垂直居中时，可以在div中添加 m-auto 样式。
如下图所示，每个卡片的左侧图片没有垂直居中，然而我们需要它垂直居中。

这里写图片描述

图1. 未垂直居中的效果

此时，我们在图片的外层div中添加 m-auto 样式，如下图所示，完成了我们的预期效果：
这里写图片描述

图2. 垂直居中的效果图

作者：戴翔
电子邮箱：daixiangcn@outlook.com

戴翔的技术博客
关注
专栏目录
bootstrap中的垂直居中
早安再见晚安舒服
05-13 5540
利用bootstrap搭建页面的时候，遇到字体和图片如何垂直居中的问题，解决方法如下 首先增加一个类： .son{ display: flex; justify-content:center; align-items:Center; } 这个类直接用于你需要垂直居中的那个div 注意 除此之外还需要增加一个类 .father{ height: 100%; text-alig...
bootstrap 垂直居中 布局_Bootstrap 4 栅格系统垂直布局
weixin_42515336的博客
01-26 1590
关键词：bootstrap 4，vertical alignment，grid systerm问题：按照Bootstrap 4 官方文档的说明。应用.align-items-center可以使元素垂直居中：Bootstrap 4 垂直居中示例.png官方示例代码：One of three columnsOne of three columnsOne of three columnsOne of t...
Bootstrap 4 网格系统
最新发布
wjs2024的博客
07-27 394
Bootstrap 4 的网格系统基于 flexbox，这是一个 CSS3 的布局模型，它可以提供比传统浮动布局更强大和灵活的布局方式。网格系统允许你创建包含行和列的布局，这些列可以根据屏幕大小自动调整，以适应不同的设备和分辨率。
bootstrap4 div水平垂直居中
sxdx2007401103的博客
06-17 2056
bootstrap4 让一个div在另一个div中水平垂直居中： <div d-flex justify-content-center"> <div class="align-self-center"> </div> </div>
css 垂直居中_「干货」CSS 不定宽高的垂直水平居中（最全 9 种）
weixin_39620197的博客
11-21 136
作者简介：Jaked 8年前端工作经验，主要分享：职业发展方面、前端技术、面试技巧等。掘金：Micherwa 的个人主页 - 专栏 - 掘金垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after...
bootstrap模态框垂直居中效果
11-27
为了使模态框在不同设备上都能保持垂直居中，可以使用Bootstrap的栅格系统(`.col-sm-*`)和响应式CSS类。此外，还添加了一些JavaScript事件监听器，如`onkeydown`，用于禁用输入框内的空格和回车键，以防止不必要的...
BootStrap模态框不垂直居中的解决方法
11-27
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法，供大家参考，具体内容如下 解决问题：BootStrap自带的模态框不垂直居中 解决方案：调用BootStrap为我们提供的方法$(‘.modal’).on(‘show.bs.modal’, ...
bootstrap 模态框（modal）实现水平垂直居中显示
11-28
然而，在实际应用中，开发者可能会遇到一些定制需求，比如让模态框在页面中水平垂直居中显示。默认情况下，Bootstrap的模态框会在页面顶部偏下30px的位置显示，并保持左右居中，但垂直居中的实现并不直接。 要让...
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
1. 使用Flexbox：Bootstrap4开始支持Flexbox，可以为父容器添加`d-flex`, `align-items-center`类，这将在所有支持Flexbox的浏览器中实现垂直居中。 2. CSS Grid：如果浏览器支持，也可以使用CSS Grid创建一个两行一...
bootstrap中如何使div上下、垂直居中
热门推荐
flyingfox717的博客
09-20 1万+
使用bootstrap布局，如何使div在指定区域上下、垂直居中并适应各个屏幕？ 在垂直方向，可以设置需要居中的div定位为absolute，指定距离top距离50%。水平方向可以指定div的宽度col-lg- ，然后进行对应的偏移。 html页面： <div class="container-fluid" > <div class="login-form co...
Bootstrap弹出框水平居中，垂直居中
09-21
Bootstrap弹出框水平居中，垂直居中
Bootstrap4模态框垂直居中
qq_37221649的博客
02-16 3713
Bootstrap4模态框垂直居中，只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了。具体如下。 Bootstrap4模态框默认不会居中显示在浏览器窗口中心而是显示在窗口顶部，在很多情况下这种设计十分不美观。 百度的时候发现能找到的资料都是Bootstrap3的，而这些方法在Bootstrap4上大部分已经不适用了。 在这里先直接...
转载：Bootstrap3 与Bootstrap4垂直水平居中
u013789737的博客
12-26 1578
Bootstrap3 与Bootstrap4垂直水平居中
bootstrap table 垂直居中
西卡卡的博客
04-17 531
表格设置水平居中时加 text-center就行，但不能垂直居中。
bootstrap 页面垂直居中_bootstrap栅格系统中如何实现垂直居中
weixin_39928686的博客
12-19 594
不能居中的罪魁祸首是col-sm-*的float: left样式，因为对于col-sm-*而言，只要屏幕宽度不小于@screen-sm-min就不会折行，所以可以考虑不使用float: left而是用display: table-cell来实现对齐，这样就能比较好的解决居中问题了。不过问题是不支持这种display的浏览器就会出问题，你可以考虑用 CSS hack 来 ...
bootstrap 页面垂直居中_bootstrap-4 modal(模态框)垂直居中
weixin_39958138的博客
12-19 452
在js中找到(红色是我添加的方法)：var left = ($(document.body).width() - that.$element.width()) /2;var top =($(document.body).height() - that.$element.height()) /2;var scrollY =document.documentElement.scrollTop ||do...
元素布局与居中-垂直居中与水平居中的几种方法
qq_42619099的博客
06-30 332
HTML（在不设置css属性的情况下）根据元素类型不同而布局不同，块级元素靠左边向下排列，行内元素和行内块元素不会独占一行，可以横向排列。所以不借助css的话，页面布局就会有很大的局限性。 能够影响布局的css属性（常用）： 属性 属性值 作用 margin xxpx 设置盒子外边距，可以理解为包裹电视机的泡沫，在外部影响了电视机与桌子的距离 padding xxpx 设置盒子内边距，调整盒子内容的布局 position absolute（绝对定位）relative（相对定位）fix
bootstrap div col文字垂直居中
05-16
想要在 Bootstrap 的 `div` 中实现文字垂直居中，可以使用以下的 CSS 样式： ```css .vertical-align { display: flex; align-items: center; } ``` 然后，在 `div` 中添加 `vertical-align` 类，就可以实现垂直居中了。 例如，下面的代码片段中，左侧的内容就实现了垂直居中： ```html <div class="container"> <div class="row"> <div class="col-md-6 vertical-align"> <h1>这里是标题</h1> <p>这里是内容</p> </div> <div class="col-md-6"> <img src="图片地址" alt="图片"> </div> </div> </div> ``` 注意，上述样式需要在 Bootstrap 样式之后进行引入，否则可能会被 Bootstrap 样式覆盖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

戴翔的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值