bootStrap3 垂直居中

近期使用ng重构公司的后台管理系统，类似modal这样的组件，再也不用像以前那样先创建再append(而是由状态驱动)；为图方便使用bootstrap的样式和angular-ui的bootstrap组件，然而它的弹出层默认样式是水平居中，垂直方向上并没有；F12之，找到bootstrap.min.css(这里是3.3.5)的相应代码，主要修改以下三个地方，修改后的样子：

第一处(将0改为-50%，相对自身偏移一半)：

.modal.in .modal-dialog{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%)}

第二处(原先是relative)：

.modal-dialog{position:absolute;width:auto;margin:10px auto;left:0;right:0;top:50%}

第三处：

@media (min-width:768px){.modal-dialog{width:600px}

此时modal已经可以垂直居中了：

bootStrap3 垂直居中相关推荐

Bootstrap3 与Bootstrap4垂直水平居中
Bootstrap水平居中 // 文本:class ="text-center" // 图片居中:class = "center-block" //其他元素:/ ...
Bootstrap4模态框垂直居中
Bootstrap4模态框垂直居中,只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了.具体如下. Bootstrap4模态框默认不会居中显 ...
html 文字上下垂直居中
只是文字的是话可以考虑使用line-height,,,, 当把 line-height 的高度设置和 height 高度一样就能使文字垂直居中一段简单的代码 <!DOCTYPE html&g ...
微信小程序 view中的image水平垂直居中
当 display: flex 配合 justify-content: center 使用时可以让view水平居中而配合 align-items: center 用时可以实现垂直居中效果 .card ...
用JavaScript和CSS实现“在页面中水平和垂直居中”的时钟
思路:实现起来最麻烦的事实上是水平居中和垂直居中,当中垂直居中是最麻烦的. 考虑到浏览器兼容性,网上看了一些资料,发如今页面中垂直居中确实没有什么太好的办法. 于是就採用了position:fixed ...
jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
水平，垂直居中的15种方法
一.水平居中 1.文字水平居中 <div class="one"> 测试居中 </div> <style> .one{ width: 200px ...
HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，
1 标签包含规范 ◆div可以包含所有的标签. ◆p标签不能包含div h1等标签. ◆h1可以包含p,div等标签. ◆行内元素尽量包含行内元素,行内元素不要包含块元素. 2 规避脱标流 ◆尽量使用 ...
CSS里总算是有了一种简单的垂直居中布局的方法了
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...

bootStrap3 垂直居中

bootStrap3 垂直居中相关推荐

最新文章

热门文章