在Bootstrap4中使用垂直居中

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

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

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

这里写图片描述

图1. 未垂直居中的效果

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

图2. 垂直居中的效果图


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


daixiangcn CSDN认证博客专家 后端开发工程师 产品体验官
中国公民,中共预备党员,CSDN博客专家,本科大四在读。江苏省第四届“互联网+”大学生创新创业大赛二等奖获得者,第二届、第三届微信小程序应用开发大赛全国三等奖、华东赛区二等奖项目作者,微信小程序《约车吗》、《庆云慈善会》、《锋云速检》项目工程师。
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页