Question

我正在尝试生成和居中表单。我写了以下代码：

        var frm = document.createElement("form");
        var overlay = document.createElement("div");
        var helper= document.createElement("div");
        helper.setAttribute("style", "display:inline-block; width:0; heigth:100%; vertical-align: middle; background-color: green;");
        overlay.setAttribute("style", "position: absolute; top:0; left:0; right:0; bottom:0; \n\
                            opacity: 0.8; background-color: black;");
        frm.setAttribute("method", "get");
        frm.setAttribute("style", "display:inline-block; vertical-align:middle; width:20%; border:2px solid white; padding: 30px; \n\
                        background-color:#F7F7F7; font-family: \"Arial\", \"sans-serif\"; font-weight: 100;\n\
                        font-size:12px; opacity: 1;");
        document.body.appendChild(overlay);
        overlay.appendChild(frm);
        overlay.appendChild(helper);

我希望表单frm位于div overlay的hte中心。但我只有一个水平居中，而不是垂直。如何解决这个问题？

Answer 1

定心：

http://jsfiddle.net/XHFKL/1/

var frm = document.createElement("form");
        var overlay = document.createElement("div");
        var helper= document.createElement("div");
        helper.setAttribute("style", "display:inline-block; width:0; height:100%; vertical-align: middle; background-color: green;");
        overlay.setAttribute("style", "position: absolute; top:0; left:0; right:0; bottom:0; \n\
opacity: 0.8; background-color: black; text-align:center;");
        frm.setAttribute("method", "get");
frm.setAttribute("style", "display:inline-block; vertical-align:middle; text-align:center; width:20%; border:2px solid white; padding: 30px; \n\
background-color:#F7F7F7; font-family: \"Arial\", \"sans-serif\"; font-weight: 100; margin:0 auto;\n\
                        font-size:12px; opacity: 1;");
        document.body.appendChild(overlay);
        overlay.appendChild(frm);
        overlay.appendChild(helper);

使用javascript生成和居中表单

1 个答案: