水滴石主要分享一些生活中的经验和IT技术自学过程中积累的技术、学习资源和软件资源等。座右铭:坚持+自律=开挂人生。
当前位置: 首页 > 网站建设 > 在bootstrap4中图片文字在div中垂直居中的方法

在bootstrap4中图片文字在div中垂直居中的方法

标签: html

本文介绍了图片、文字通过bootstrap4框架在div中实现垂直居中的方法。

第一步、先引入bootstrap4的源码文件,

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

第二步、再在图片、文字所在的div class中添加m-auto样式,即可实现垂直居中(包括图片和文字垂直居中对齐)效果。

bootstrap4 垂直居中


利用html的css+div实现垂直居中需要设置行高,比较麻烦,相对来说利用bootstrap4本身自带的样式让图片或者文字在div中垂直居中还简单方便些。


更多相关推荐

  • 没有相关文章

版权保护:本文《在bootstrap4中图片文字在div中垂直居中的方法》由<我爱分享>原创,转载请保留链接:http://www.shuidi365.cn/site/85.html

此博客主要用来分享、推荐自己日常、学习过程中感觉比较实用的经验、IT技术和一些比较好的资源(各种软件、各种开发手册、各种学习资料、各种视频教程等),希望对大家有所帮助,有问题请留言,欢迎来交流,联系QQ邮箱/微信:342807450

合作伙伴
冀ICP备19020226号-1 冀公网安备 13010902000246号