Bootstrap div 居中实现
程序员文章站
2022-05-01 22:51:32
...
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.
In markup this would look like:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method, it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.
推荐阅读
-
求解DIV如何实现长横线?及其他_html/css_WEB-ITnose
-
Bootstrap图片轮播效果实现方法
-
Bootstrap面板(Panels)的简单实现代码
-
bootstrap 实现自适应导航栏
-
Bootstrap自适应导航栏的实现
-
jquery实现弹出div,始终显示在屏幕正中间的简单实例
-
IE8.0下DIV+CSS网站不居中解决办法_html/css_WEB-ITnose
-
bootstrap-closable-tab可实现关闭的tab标签页插件
-
div中有一个marquee标签,marquee中有滚动显示的文字,如何让文字在div中垂直居中从右向左滚动显示?_html/css_WEB-ITnose
-
css5种实现垂直居中_html/css_WEB-ITnose