正文标记中的HTML中心内容

时间:2014-10-17 06:31:51

标签: html css center

我正在尝试将内容放在我的body标签中的简单HTML页面中。我希望机身宽度为100%,我的内部有一个带有设定宽度的容器div,我希望容器位于屏幕的中心。

我尝试将保证金设为0 auto;不起作用,试图在body标签中设置align="center",不起作用。

这是我的页面,因为您可以看到它不在中心:http://jsbin.com/vifekivatabo/1/

我做错了什么?

5 个答案:

答案 0 :(得分:1)

嘿,你忘了这个

定义

您的.container1 margin:0 auto;

.container1{
margin:0 auto;
}

答案 1 :(得分:1)

尝试使用容器类:

.container
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

答案 2 :(得分:1)

   .container1 {
        max-width: 600px;
        width: auto;
        margin:0 auto;
        text-align:center;
    }

ADD

保证金:0自动; //使页面居中

文本对齐:中心;

<强>小提琴

http://jsfiddle.net/7c9wjLy6/1/

答案 3 :(得分:1)

margin:0 auto;没问题 这里

.container1{
    margin:0 auto;
}

答案 4 :(得分:0)

在开始div之前放<center>,在关闭div后放</center>。 像这样:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        img {
            max-width: 100%;
            height: auto;
            width: auto\9; /* ie8 */
        }

        body {
            width: 100%;
            font-family: Arial, Verdana;
            margin: 0 auto !important;
            padding: 0;
        }

        .container1 {
            max-width: 600px;
            width: auto;
        }

        .inner {
            max-width: 60%;
            width: auto;
            margin: 0 auto;
        }

        .round {
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            margin: 0 auto 0 auto;
            padding: 5px;
            border: 2px solid #f4f3ee;
            background: #ffffff;
        }

        .auto-style1 {
            font-size: xx-small;
        }
    </style>
</head>
<body>
<center>
    <div class="container1">

        <img alt="l" src="~/xxx.png" />

        <div id="acceptMsg" class="inner">

            <b>Welcome to the xxx mobility enrollment page.</b>
            <br />
            <p>dasdasd</p>


            <br />
            <br />
            <div>
                @*                <select name="DL_MarketChooser" id="DL_MarketChooser" style="width:40%;">
    <option selected="selected" value="Choose Region">Choose Region</option>
    <option value="https://connect.molnlycke.com/ssp/hq">Temporary Enrollment</option>

</select>*@


                <table id="loginTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
                    <colgroup>
                        <col>
                    </colgroup>
                    <tbody>
                        <tr class="middleRow">
                            <td class="firstColumn">Username:</td>
                            <td class="secondColumn">
                                <input type="text" id="userID" size="11" value="">
                            </td>
                        </tr>

                        <tr class="middleRow">
                            <td class="firstColumn">Password:</td>
                            <td class="secondColumn">
                                <input type="password" id="Password" size="11" value="">
                            </td>
                        </tr>

                        <tr class="lastRow">
                            <td colspan="2">
                                <div class="registerButtons" align="center">
                                    <button type="button" onclick="performAuth()" tabindex="0">Login</button>
                            </td>
                        </tr>

                    </tbody>
                </table>



                <table id="registerTable" align="center" class="registration" border="0" cellpadding="0" cellspacing="6">
                    <colgroup>
                        <col>
                    </colgroup>
                    <tbody>
                        <tr class="firstRow">
                            <td class="firstColumn"></td>
                            <td class="secondColumn"><span class="gwt-CheckBox">
                                <input type="checkbox" id="isPDA" tabindex="0"><label for="gwt-uid-1">My device has no phone number</label></span></td>
                        </tr>
                        <tr class="middleRow">
                            <td class="firstColumn">Country:</td>
                            <td class="secondColumn">
                                <select tabindex="0" id="countrySelect">
                                    <option value="+46">Sweden</option>
                                    <option value="+83">United States</option>
                                </select>
                            </td>
                        </tr>
                        <tr class="middleRow">
                            <td class="firstColumn"></td>
                            <td class="secondColumn">
                                <table>
                                    <colgroup>
                                        <col>
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td class="inline-label">Country<br>
                                                Code</td>
                                            <td class="inline-label">Prefix and Number<br>
                                                (no space, no leading zero)</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr class="middleRow">
                            <td class="firstColumn">Mobile:</td>
                            <td class="mobile-cell secondColumn">
                                <table>
                                    <colgroup>
                                        <col>
                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <table cellspacing="1" cellpadding="0">
                                                    <tbody>
                                                        <tr>
                                                            <td align="left" style="vertical-align: middle;">
                                                                <input type="text" tabindex="0" id="countryCode" size="1" disabled="" value="+46"></td>
                                                            <td align="left" style="vertical-align: top;">
                                                                <div class="errorMessage" style="display: none;">Required field</div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                            <td>
                                                <table cellspacing="0" cellpadding="0">
                                                    <tbody>
                                                        <tr>
                                                            <td align="left" style="vertical-align: top;">
                                                                <table cellspacing="1" cellpadding="0">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td align="left" style="vertical-align: middle;">
                                                                                <input type="text" tabindex="0" id="phoneNumber" size="11"></td>
                                                                            <td align="left" style="vertical-align: top;">
                                                                                <div class="errorMessage" style="display: none;">Required field</div>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr class="middleRow">
                            <td class="firstColumn">Platform:</td>
                            <td class="secondColumn">
                                <select tabindex="0" id="platformSelect">
                                    <option value="no">-Select-</option>
                                    <option value="A">Android</option>
                                    <option value="I">iOS</option>
                                    <option value="W">Windows Phone</option>
                                </select>
                            </td>
                        </tr>
                        <tr class="middleRow">
                            <td class="firstColumn"></td>
                            <td class="secondColumn"><span class="gwt-CheckBox">
                                <input type="checkbox" id="isEmp" tabindex="0" checked=""><label for="isEmp">I own this device</label></span></td>
                        </tr>
                        <tr class="lastRow">
                            <td colspan="2">
                                <div class="registerButtons" align="center">
                                    <button type="button" onclick="performRegister()" tabindex="0" id="registerButton" disabled>Register</button>
                                    <button type="button" tabindex="0">Clear</button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <br />
        <p style="text-align: center" class="auto-style1">
            Application Version 1.5<br />
    </div>
</center>
</body>
</html>

我还为您创建了CodePenJsFiddle