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屋！