bootstrap是一款十分流行的前端组件库,我们在制作模板的时候,使用bootstrap会提高工作效率,减少自己写css样式的麻烦。鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的,当然也有少部分是使用其他前端框架实现。从主题制作的实际经验来看,个人认为首推使用bootstrap,这款全球最多人应用的前端框架之所以会受到欢迎自然是有其相对于其他前端框架优越的地方。截止本文发布,bootstrap的最新版为4.3.1版,这篇文章我们介绍的是bootstrap4如何来实现div的水平居中和垂直居中。
为什么要介绍bootstrap4如何实现div的水平居中和垂直居中?因为在实际的鲶鱼CMS主题制作过程中,我们可能会遇到类似需要居中的问题,而我们发现使用bootstrap4来实现水平垂直居中十分方便,在这里记录方便大家查阅。
我们先来看代码:
<div class="container">
<div class="row justify-content-center bg-light" style="height: 500px">
<div class="align-self-center">
水平垂直居中
</div>
</div>
</div>
上面的代码就可以实现让文字“水平垂直居中”在div内实现水平且垂直居中,您可以复制这段代码实际测试一下。这里的“bg-light”是设置div背景色的,这里为了能看清楚效果,所以加了这个,实际使用中您可以删除“bg-light”。这里的关键一点是外层div的高度设置,我们这里使用“style="height: 500px"”来设置外层div的高,这里高度设置为500px,您在实际使用中可以调整。
好了,用bootstrap4来实现水平垂直居中是不是显得很简单。
Original article, reproduced please specify:bootstrap4如何实现div的水平居中以及垂直居中 | Catfish(鲶鱼) CMS
我们在做主题的时候,有时需要在页面单独显示当前菜单下的二级菜单,这个在鲶鱼系统里面有两种...
由于PHP软件的运行都需要服务器运行环境,虽然可以找到很多PHP的集成环境来使用,但是多...
我们在使用博客网站的时候,经常会希望对自己发布的文章进行归档处理,例如每个月发布了哪些文...
鲶鱼系统可以使用找回密码功能,但是在开启找回密码功能之前,我们必须要进行一项设置,就是S...
现代程序开发多是使用框架来写应用程序,因为框架可以带来事半功倍的效果。对于PHP程序也是...
鲶鱼cms系统5.2.0版以及鲶鱼Blog系统3.2.0版在编辑文章页面新增了上传附件功...
Management background is composed of five bl...
In the previous section, we talked about how...
In the previous section we talked about how ...
To the last section we have learned to use t...
By the end of the previous section, we have ...