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

本文介绍了图片、文字通过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样式，即可实现垂直居中（包括图片和文字垂直居中对齐）效果。

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

更多相关推荐

• 没有相关文章