BootStrap Div居中

最新推荐文章于 2023-01-04 14:44:35 发布
最新推荐文章于 2023-01-04 14:44:35 发布
阅读量8.7k 收藏
点赞数 1
分类专栏： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/raosheng1993/article/details/45419095
版权


使用BootStrap，如果一个Div只占用了一小部分，怎么居中呢？

[html] view plain copy
  1. <!doctype html>  
  2. <html lang="zh-CN">  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>BootStrap3.3.2测试</title>  
  6. <link href="../bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">  
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  
  8. <script src="../Jquery/jquery-1.11.2.min.js"></script>  
  9. <script src="../bootstrap/3.3.2/js/bootstrap.min.js"></script>  
  10. <style>  
  11. .col-center-block {  
  12.     float: none;  
  13.     display: block;  
  14.     margin-left: auto;  
  15.     margin-right: auto;  
  16. }  
  17. </style>  
  18. </head>  
  19.   
  20. <body>  
  21. <div class="container">  
  22.   <div class="row myCenter">  
  23.     <div class="col-xs-6 col-md-4 col-center-block">  
  24.       <form class="form-signin">  
  25.         <h2 class="form-signin-heading">请登录</h2>  
  26.         <label for="username" class="sr-only">用户名</label>  
  27.         <input type="text" id="username" class="form-control" placeholder="用户名" required autofocus>  
  28.         <label for="inputPassword" class="sr-only">密码</label>  
  29.         <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>  
  30.         <div class="checkbox">  
  31.           <label>  
  32.             <input type="checkbox" value="remember-me">  
  33.             记住我 </label>  
  34.         </div>  
  35.         <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>  
  36.       </form>  
  37.     </div>  
  38.   </div>  
  39. </div>  
  40. </body>  
  41. </html>  
给Div添加这样一个Style就可以实现：

[css] view plain copy
  1. <style>  
  2. .col-center-block {  
  3.     float: none;  
  4.     display: block;  
  5.     margin-left: auto;  
  6.     margin-right: auto;  
  7. }  
  8. </style>  
最终效果如下：



bootstrap 标题居中加颜色_7.1 整体外观：设置图的标题
weixin_26757925的博客
01-22 727
参考自《R Graphics Cookbook》本节针对怎么在作图后添加整体（全局、全图）标题的问题。1、 直接添加标题的语法：1. ggtitle("") 或 2. labs(title = ""), 本文不展示labs方法2、 间接添加标题的语法：使用annotate添加标签，让其起到标题效果library(ggplot2)library(gcookbook)#底图hw_plot <- ...
bootstrap div 居中_Flask之Bootstrap前端Grid布局小结
weixin_39835991的博客
12-27 374
I am not a designer nor a coder. I'm just a guy with a point-of-view and a computer.筑基<融合<元婴<分神<渡劫<大乘一、背景懒癌依旧，2016年底堆砌代码成功运行了http://intumu.com，之后忙于微信小程序的开发（RestAPI后端接口），因为后端代码看不见，垃圾一点也无...
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
由于H5页面在使用bootstrap的自适应导致从高度上总是自动排列，导致登录框不能自动居中。项目中发现一个动态居中办法，很好用，可以让Bootstrap登录框自适应水平居中、垂直居中。
bootstrap div 居中
princeLLM的博客
03-09 1959
bootstrap table 居中没研究明白，所以只好用div进行嵌套，给Div添加这样一个Style就可以实现： [css] view plain copy    .col-center-block {       float: none;       display: block;       margin-left: auto; 
Bootstrap div 居中实现
热门推荐
Leisurelyc的博客
05-10 1万+
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 th...
JS学习记录2
十三月的博客
09-27 468
Global对象 eval json Math对象 Number对象 Object对象
bootstrap div居中
05-12
可以使用Bootstrap的flexbox布局来实现div居中。下面是一个简单的示例代码： ```html <div class="d-flex justify-content-center align-items-center"> <div class="my-div">内容</div> </div> ``` 在包含要居中...
bootstrap如何设置表格居中
weixin_35751194的博客
01-04 2386
您可以使用 Bootstrap 的 mx-auto 类来设置表格居中。将 mx-auto 类添加到表格的父元素上即可。 例如： <div class="mx-auto"> <table> <!-- 表格内容 --> </table> </div> 还可以使用 text-center 类来使表格文本居中： <tabl...
bootstrap div内居中
最新发布
09-23
Bootstrap中的`div`元素想要实现内居中，你可以使用以下几种方法： 1. **Flexbox** 直接法：给包含`div`的容器添加`display: flex; justify-content: center; align-items: center;`样式，这样内容会在水平和垂直...
元素居中
qq_44875145的博客
11-07 521
元素居中 注意:父元素为块级元素，子元素分以下三种情况讨论: 一.内联元素在父元素中居中: 水平居中:父元素将text-align的值设置为center 垂直居中:父元素将line-height的值设置为与父元素相同高度的值。 二.内联块元素在父元素中居中: 水平居中:父元素将text-align的值设置为center 垂直居中:给该元素设置vertical-align的值设置为middle；给父元素的before或者after伪元素设置height与父元素等高度,width为0,vertical-a
Bootstrap4 div居中
Hibiki's Ending
06-09 3545
<div class="row justify-content-center"> </div> 居中前 居中后
bootstrap div 居中_Bootstrap的flex样式
weixin_36480721的博客
12-22 582
引入新的Flex弹性布局，可以实现通过一整套响应灵活的实用程序，快速管理栅格的列、导航、组件等的布局、对齐和大小。启用弹性盒模型 .d-flex / .d-inline-flex 使用display通用属性来创建一个flxbox容器，并将直属内部子元素转换为flex属性。 flex元素的容器和子项目可以通过额外的flex属性定义来实现进一步修改。<!DOCTYPE html> <...
bootstrap 如何让div内部垂直居中？
渐渐的忘记，赶不上明天（读研ing，2024年毕业）
02-18 7030
选中要居中的元素，然后设置其css属性：transform: translateY(50%); 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE...
bootstrap中如何使div上下、垂直居中
flyingfox717的博客
09-20 1万+
使用bootstrap布局，如何使div在指定区域上下、垂直居中并适应各个屏幕？ 在垂直方向，可以设置需要居中的div定位为absolute，指定距离top距离50%。水平方向可以指定div的宽度col-lg- ，然后进行对应的偏移。 html页面： <div class="container-fluid" > <div class="login-form co...
bootstrap modal垂直居中
anku1776的博客
03-10 239
　　使用过bootstrap modal（模态框）组件的人都有一种困惑， 好好的一个弹出框怎么就无法垂直居中了呢？ 当然网上一些前辈也给出了不少答案， 感觉不太全而且针对的都是各自的项目难以给我等小白太直观的理解。因而手痒试试写个稍微完整点的解决方案， 作为总结及日后回顾之用。 　　项目中的bootstrap版本是3.X , 作为项目后台使用。 在项目进行过程中遇到组件弹出框无法垂直居...
css 垂直居中_「干货」CSS 不定宽高的垂直水平居中（最全 9 种）
weixin_39620197的博客
11-21 175
作者简介：Jaked 8年前端工作经验，主要分享：职业发展方面、前端技术、面试技巧等。掘金：Micherwa 的个人主页 - 专栏 - 掘金垂直居中，在 CSS 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法，是的，你没有看错，::after...
关于bootstrap如何让一个div在垂直水平方向居中且自适应不同分辨率
qq_34735535的博客
09-29 8257
1：在要居中的div加 2:在css中加.col-center-block { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform:  translateY(-50%); -ms-transform:  translateY(-50%); -o-transfor
Bootstrap居中
qq_37499398的博客
05-17 3081
Center Text with Bootstrap既然我们在使用Bootstrap，我们可以通过居中头部元素来使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。记住：你可以用空格分开多个class来为同一个元素添加多个 class 属性， 就像这样：&lt;h2 class="red-text text-center"&gt;your text&lt...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值