精华内容
下载资源
问答
  • bootstrap modal 垂直居中对齐

    千次阅读 2019-04-20 16:24:06
    bootstrap modal 垂直居中对齐
                   

    文章参考

    http://www.bubuko.com/infodetail-666582.html

    http://v3.bootcss.com/javascript/#modals

     

    Html代码  收藏代码
    1. <div class="modal fade" id="sqh_model">  
    2.     <div class="modal-dialog">  
    3.         <div class="modal-content">  
    4.             <div class="modal-header">  
    5.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  
    6.                 <h4 class="modal-title">蔬菜预约</h4>  
    7.             </div>  
    8.             <div class="modal-body">  
    9.                 <p>尽请期待</p>  
    10.             </div>  
    11.             <div class="modal-footer">  
    12.                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>  
    13.                 <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>  
    14.             </div>  
    15.         </div><!-- /.modal-content -->  
    16.     </div><!-- /.modal-dialog -->  
    17. </div><!-- /.modal -->  
    18.   
    19.   
    20. function showTips(){  
    21.     $('#sqh_model').modal('show')  
    22. }  

     

     

    默认是距离顶部30px,左右居中

    如图所示

     

    解决办法一:覆盖之前的CSS样式

    Html代码  收藏代码
    1. /**********对bootstrap的modal样式进行重写**********/  
    2. .modal-dialog {  
    3.     margin: 200px auto;  
    4. }  

     

     

    解决办法二:调用回调函数

     

    Js代码  收藏代码
    1. function showTips(){  
    2.         //{"backdrop":"static"}点击背景不会消失  
    3.         $('#sqh_model').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){  
    4.             // 是弹出框居中。。。  
    5.             var $modal_dialog = $(this.$element[0]).find('.modal-dialog');  
    6.             //获取可视窗口的高度  
    7.             var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  
    8.             //得到dialog的高度  
    9.             var dialogHeight = $modal_dialog.height();  
    10.             //计算出距离顶部的高度  
    11.             var m_top = (clientHeight - dialogHeight)/2;  
    12.             console.log("clientHeight : " + clientHeight);  
    13.             console.log("dialogHeight : " + dialogHeight);  
    14.             console.log("m_top : " + m_top);  
    15.             $modal_dialog.css({'margin': m_top + 'px auto'});  
    16.         });  
    17.     }  

     

    解决办法三:修改源代码

    Js代码  收藏代码
    1. Modal.prototype.adjustDialog = function () {  
    2.     var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight  
    3.   
    4.     this.$element.css({  
    5.       paddingLeft:  !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',  
    6.       paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''  
    7.     });  
    8.   
    9.     // 是弹出框居中。。。  
    10.     var $modal_dialog = $(this.$element[0]).find('.modal-dialog');  
    11.     //获取可视窗口的高度  
    12.     var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;  
    13.     //得到dialog的高度  
    14.     var dialogHeight = $modal_dialog.height();  
    15.     //计算出距离顶部的高度  
    16.     var m_top = (clientHeight - dialogHeight)/2;  
    17.     console.log("clientHeight : " + clientHeight);  
    18.     console.log("dialogHeight : " + dialogHeight);  
    19.     console.log("m_top : " + m_top);  
    20.     $modal_dialog.css({'margin': m_top + 'px auto'});  
    21. }  

     

     

    参数

    可以将选项通过 data 属性或 JavaScript 代码传递。对于 data 属性,需要将参数名称放到 data- 之后,例如 data-backdrop=""

    名称 类型 默认值 描述
    backdropboolean 或 字符串'static'true

    Includes a modal-backdrop element. Alternatively,

    specify static for a backdrop which doesn't close

    the modal on click.

    keyboardbooleantrue键盘上的 esc 键被按下时关闭模态框。
    showbooleantrue模态框初始化之后就立即显示出来。
    remotepathfalse

    This option is deprecated since v3.3.0 and will be

    removed in v4. We recommend instead using

    client-side templating or a data binding framework,

    or calling jQuery.loadyourself.

    如果提供的是 URL,将利用 jQuery 的 load 方法从此

    URL 地址加载要展示的内容(只加载一次)

    插入 .modal-content 内。如果使用的是 data 属性 API,

    还可以利用 href 属性指定内容来源地址。下面是一个实例:

    复制
    <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

    方法

    .modal(options)

    将页面中的某块内容作为模态框激活。接受可选参数 object

    复制
    $('#myModal').modal({  keyboard: false})

    .modal('toggle')

    手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal 或hidden.bs.modal 事件之前)。

    复制
    $('#myModal').modal('toggle')

    .modal('show')

    手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal 事件之前)。

    复制
    $('#myModal').modal('show')

    .modal('hide')

    手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal 事件之前)。

    复制
    $('#myModal').modal('hide')

    .modal('handleUpdate')

    Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.

    Only needed when the height of the modal changes while it is open.

    复制
    $('#myModal').modal('handleUpdate')

    事件

    Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

    All modal events are fired at the modal itself (i.e. at the <div class="modal">).

    事件类型 描述
    show.bs.modal

    show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器

    的元素,则此元素可以通过事件的relatedTarget 属性进行访问。

    shown.bs.modal

    此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。

    如果是通过点击某个作为触发器的元素,则此元素可以通

    过事件的 relatedTarget 属性进行访问。

    hide.bs.modalhide 方法调用之后立即触发该事件。
    hidden.bs.modal此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。
    loaded.bs.modal远端的数据源加载完数据之后触发该事件。
    复制
    $('#myModal').on('hidden.bs.modal', function (e) {  // do something...})
               
    展开全文
  • 方法一:利用定位(常用方法,比较推荐).parent{ width:500px, height:500px, border:1px solid #000, position:relative } .child{ width:100px, height:100px, border:1px solid #999, position: absolute;...

    方法一:利用定位(常用方法,比较推荐)

    .parent{ width:500px, height:500px, border:1px solid #000, position:relative } .child{ width:100px, height:100px, border:1px solid #999, position: absolute; top: 50%, left: 50%; margin-top: -50px margin-left: -50px }

    方法二:利用 margin:auto;

    .parent { width: 500px; height: 500px; border: 1px solid #000; position: relative;} .child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

    方法三:利用 display:table-cell

    .parent { width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center;} .child { width: 100px; height: 100px; border: 1px solid #999; display: inline-block;}

    方法四:利用 display:flex;设置垂直水平都居中

    .parent { width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;} .child { width: 100px; height: 100px; border: 1px solid #999;}

    展开全文
  • 最终实现效果为实现行内元素的水平、垂直居中对齐,效果图如下:   接下来为实现代码: 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-...
  • win SDK编写的对话框 源代码 有文字右对齐的文本框,LABEL(STATIC),按钮控件,右上角只有一关闭按钮,居中显示
  • HTML的源代码     css属性定义 .div { width: 100%; height: 100%; text-align: center; } .span { display: inline-block; height: 100%; vertical-align: middle; } .img { vertical-align: middle; }

    HTML的源代码

    <div>
        <span></span>
        <img src="#">
    </div>

    css属性定义

    .div { width: 100%; height: 100%; text-align: center; }
    .span { display: inline-block; height: 100%; vertical-align: middle; }
    .img { vertical-align: middle; }

    展开全文
  • div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右 居中靠左对齐介绍篇)实现DIV对齐用到关键属性有两个,一个为float一个...

    div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐

    使用CSS浮动属性实现DIV各种对齐,比如DIV层左对齐,DIV居中对齐,DIV居右对齐等(DIV靠右 居中

    靠左对齐介绍篇)

    实现DIV对齐用到关键属性有两个,一个为float一个为margin。

    第一个float,可以让你div层居左居右对齐,另外一个margin实现div盒子居中对齐。

    接下来DIVCSS5使用分别实例介绍DIV布局对齐。

    为了过程DIV对齐变化,DIVCSS5设置3个DIV盒子,分别CSS

    命名为“.divcss5-left”、“.divcss5-right”、“.divcss5-cent”,同时设置三者宽度、高度、边框相同属性。

    三者相同样式CSS代码:

    width:250px; height:50px; border:1px solid #F00

    一、div css布局之div左对齐   -

    TOP

    1、div左对齐条件与方法

    只需要对要靠左对齐(局左)的div样式加float:left即可。

    2、DIV+CSS布局完整代码:

    此DIV靠左对齐显示

    3、实例截图:

    div居左对齐实例截图

    div居左靠左对齐实例截图

    二、居右靠右css+div实例   -

    TOP

    1、div右对齐条件与方法

    只需要对要靠右对齐(局右)的div样式加float:right即可。

    2、div css布局完整html代码:

    此DIV靠右对齐显示

    3、靠右对齐实例截图

    div css布局实现div居右对齐实例截图

    css实现div居右对齐实例截图

    二、div居中对齐css div实例   -

    TOP

    1、div居中对齐条件与方法

    只需要对要居中对齐的div样式加margin:0 auto,不再需要加float样式。

    因为float没有居中的浮动,所以我们需要去掉float样式,为了兼容各大浏览器让div居中对齐,我们需要对div对应样式加margin:0

    auto即可。

    2、css+div布局完整HTML源代码:

    此DIV居中右对齐显示

    3、css布局实例截图

    div盒子居中对齐演示效果截图

    div盒子居中对齐演示效果截图

    四、演示与下载   -

    TOP

    展开全文
  • 1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象。html代码如下: 复制代码 代码如下: 这里随意填写~... .1 实现文字水平居中(使用text-align) 对div....
  • JCDialPad(iOS源代码)

    2021-03-17 00:52:29
    来源:github/JCDialPadLicence:MIT作者:Joseph Constantakis  CDialPad可以对按钮进行完全自定义。...按钮自动排列成1行3列,居中对齐。通过UIAppearance可以设置不同的颜色和字体。适配所有设置尺寸。
  • 可定制topMessage的背景,字体,字颜色,可再加一个小icon(图片和字自动居中对齐) 2. 消息在屏幕内的停留时间 3. 点击这个消息条响应的事件监听。 4. 可以在app启动的时候设置默认消息样式。 5. 支持屏幕旋转后自己...
  • 来源:Licence:Public Domain平台:iOS设备:iPhone... 用Core Text给文字进行排版,demo中实现文字双列排版和三列排版(多列排版),可以居中对齐、居左和居右。 Code4App编译测试,适用环境:Xcode 4.3, iOS 5.0。
  • 零基础学HTML CSS源代码

    热门讨论 2010-05-10 07:57:26
    第1章(源代码\第1章) 示例描述:本章演示HTML基本知识 HTML基本标记.html HTML基本标记的用法。 我的第一张网页.html 演示我的第一张网页。 第2章(源代码\第2章) ...
  • FDLabelView(iPhone源代码)

    2021-03-17 02:54:20
    不仅支持左对齐、右对齐以及居中,还支持 justify 排版以及 fill 排版。更秒的是,在Debug模式下,还可以任意移动label的位置,并且即时显示当前位置的坐标,更加方便排版。而且支持中文!! 效果图说明:第一幅图...
  • 字体、字号、背景色、文字颜色、加粗、下划线、斜体、删除线、下标、上标、左对齐,右对齐居中,剪取、复制、粘贴、删除、撤消、恢复、编号列表、项目列表、添加缩进、减少缩进、清除格式、全选、取消全选、对象...
  • 页眉部分必须包含软件名称,版本号,页码(软件名+版本号居中,页码对齐) 如何实现每页50行 上述3点,第2、3两点比较好实现,第1点我通过测试发现,当: 字号为10.5pt 行间距为10.5pt 段前间距为0
  • Dreamweaver代码自动缩进对齐

    千次阅读 2015-10-25 17:29:25
    一般情况下,我们用DW写的html或者css代码都计较混乱,难以阅读,即使刚开始很在意代码的可读性,但是等到所使用的标签越来越多,嵌套越来越深,这时我们已经很难去掌控html代码的格式问题了。废话不多说:第一步:...
  • HTML中怎么设置标题居中本人刚学Dw,希望热心的网友帮助...在输入好的标题前面加入代码style:text-align:center。之后即可成功将网页的标题设置为居中位置。在html5表格中标题caption如何居中用CSS控制就可以了。...
  • Android LoginActivity 源代码分析

    千次阅读 2014-10-29 19:20:42
     ①activity_login.xml界面布局代码分析 [html]   view plain copy < merge   xmlns:android = "http://schemas.android.com/apk/res/android"     xmlns:tools = ...
  • align 属性规定 div 元素中的内容的水平对齐方式。 <html> <head> <title>programb</title>...文本居中对齐 <p align=right>文本右对齐 </body> &l.
  • TExCell电子表格控件源代码

    热门讨论 2002-09-26 00:00:00
    4. 单元格文字属性(上下左右居中对齐,多行文字,字体颜色,背景色)。(Cell text property, alignment) 5. 公式运算(包含Delphi Script 解释器“Delphin”,可以执行Delphi 代码,显示 Delphi 的窗体文件DFM...
  • 摘要:C#源码,字符处理,RichTextBox C#设置RichTextBox的文本对齐方式...声明一个用于打开文件对话框的对象,保存指定文件到指定位置,设置选定的文本为居中对齐,设置选定的文本为左对齐,设置选定的文本为右对齐……
  • // 指定单元格垂直居中对齐 cellStyle.setVerticalAlignment(HSSFCellStyle.VERTICAL_CENTER); // 指定当单元格内容显示不下时自动换行 cellStyle.setWrapText(true); // 设置单元格字体 HSSFFont ...
  • elif hRefPos == 'C':#居中对齐 w = int((cols-textW)/2) elif isinstance(hRefPos, int): if hRefPos < 0: # 左移hRefPos列 w = cols + hRefPos - textH else: w = hRefPos # 右移hRefPos列 else: w = ...
  • Dxperience.LocalizationCHS 本地化源代码

    千次阅读 2008-10-17 17:09:00
    using System;using System.Collections.Generic;using System.Text;using DevExpress.XtraGrid.Localization;using DevExpress.XtraBars.Localization;using DevExpress.XtraCharts.Localization;...
  • 《MyWord》完整源代码(原创) C++ Qt

    千次阅读 2016-01-04 21:14:24
    /*段落对齐 左中右 两端**/ QAction * pActionBlockLeft; QAction * pActionBlockCenter; QAction * pActionBlockBoth; //|窗口菜单项 Action指针 //|帮助菜单项Action指针 private slots: //|更新菜单 根据 ...
  •  标题的高度和宽度,若不定义便检测Caption,否则自换行并居中   ///     public  Size HeaderSize;  }   private   struct  ReportBarcode  {    ///     ///  条码内容(A-Z,0-9)   ///     ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,271
精华内容 4,508
关键字:

居中对齐的源代码