Twitter Bootstrap - 中心模式对话框 [英] Twitter Bootstrap - Center Modal Dialog

问题描述

我正在尝试将等待屏幕模式对话框置于屏幕中间.这是我要更改的模式对话框:http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap.如何水平和垂直居中?

I'm trying to center a waiting screen modal dialog in the middle of the screen. Here is the modal dialog I'm trying to alter: http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap. How do I center it horizontally and vertically?

推荐答案

这只是将一些 CSS 应用到 pleaseWaitDialog ID 的问题.您必须设置 position:absolute 并且 margin-top 和 margin-left 需要是高度和宽度的一半.所以你的 CSS 应该是这样的:

This is just matter of applying some CSS to the pleaseWaitDialog ID. You have to set position:absolute and the margin-top and margin-left need to be half of the height and width. So your CSS should look something like this:

#pleaseWaitDialog {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -200px;
    padding: 20px;
}

您将需要使用数字来获得适合您想要的盒子大小，但这应该可以帮助您入门.

You will need to play with the numbers in order to achieve the box size that fits what you want but that should get you started.

这篇关于Twitter Bootstrap - 中心模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！