Question

为什么这个表单不显示居中？ JSFIDDLE

<body>

        <div class="text-centered">
          <form name="frmregister" action="<?= $_SERVER['PHP_SELF'] ?>" method="post" >
            <table border="0">
                <tr>
                    <td></td>
                    <td style="color:red;"><?php echo $msg; ?></td>
                </tr>
                <tr>
                    <th><label for="name"><strong>Name:</strong></label></th>
                    <td><input class="inp-text" name="name" id="name" type="text" size="30" /></td>
                </tr>
                <tr>
                    <th><label for="name"><strong>Password:</strong></label></th>
                    <td><input class="inp-text" name="password" id="password" type="password" size="30" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td class="submit-button-right">
                        <input class="send_btn" type="submit" value="Submit" alt="Submit" title="Submit" />
                        <input class="send_btn" type="reset" value="Reset" alt="Reset" title="Reset" />
                    </td>
                </tr>
            </table>
          </form>
        </div>
</body>

Answer 1

text-center不会使div或表单元素居中。 ; - ）

将此添加到您的CSS中，它将使您的表单居中：

body { text-align: center; }
     /* center all items within body, this property is inherited */
body > * { text-align: left; }
     /* left-align the CONTENTS all items within body, additionally
        you can add this text-align: left property to all elements
        manually */
form { display: inline-block; }
     /* reduces the width of the form to only what is necessary */

更新小提琴：

http://jsfiddle.net/mLrwq1w6/2/

将表单与HTML + CSS3上的中心对齐

1 个答案: