如何设计一个CSS为中心的浮动确认对话框？ [英] How to design a CSS for a centered floating confirm dialog?

问题描述

我在寻找一种方式来显示总是围绕在页面上确认对话框，和浮动在页面上。

试过了，但它不是始终围绕可言，因为其位置是固定的：

  .Popup
{
    文本对齐：中心;
    位置：绝对的;
    底部：10％;
    左：27％;
    的z-index：50;
    宽度：400像素;
    背景颜色：＃FFF6BD;
    边界：2px的纯黑色;
}
 

你知道吗？ 谢谢

解决方案

尝试使用该 CSS

#centerpoint {     顶部：50％;     左：50％;     位置：绝对的; } ＃对话 {     位置：亲属;     宽度：600px的;     保证金左：-300px;     高度：400像素;     的margin-top：-200px; }

＆LT; D​​IV ID =中心点＆GT;     ＆LT; D​​IV ID =对话框中的＆GT;＆LT; / DIV＆GT; ＆LT; / DIV＆GT;

#centerpoint 应该是对话的div容器

注意的，这一在 #centerpoint DIV应该是体内元素或内部元件不具有的的位置是：相对; 的属性

I'm looking for a way to display a confirm dialog that's always centered on the page, and floating over the page.

Tried that, but it's not 'always centered' at all, since the position is fixed:

.Popup
{
    text-align:center;
    position: absolute;
    bottom: 10%;
    left: 27%;
    z-index:50;
    width: 400px;
    background-color: #FFF6BD;
    border:2px solid black;
}

Any idea? Thanks

解决方案

Try using this CSS

#centerpoint {
    top: 50%;
    left: 50%;
    position: absolute;
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}

<div id="centerpoint">
    <div id="dialog"></div>
</div>

#centerpoint should be the container div of the dialog

Note that the #centerpoint DIV should be inside the body element or inside elements that don't have a position: relative; property

这篇关于如何设计一个CSS为中心的浮动确认对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！