Reputation: 5424

HTML center content in body tag

I'm trying to center the content in my body tag in a simple HTML page. I want the body to be 100% width, i have a container div inside of it with a set width, i want the container to be in the center of the screen.

I tried to set the margin to 0 auto; does not work, tried to set align="center" in the body tag, doesnt work.

Here is my page, as you can see it's not in center: http://jsbin.com/vifekivatabo/1/

What am i doing wrong?

Upvotes: 1

Answers (5)

Ian David Bocioaca

Reputation: 107

Just put<center> before starting the div and </center> after closing the div. Like this:

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

I've also created a CodePen and a JsFiddle for you.

Upvotes: 0

Sobin Augustine

Reputation: 3775

No problem with margin:0 auto; here

.container1{
    margin:0 auto;
}

Upvotes: 1

Manjunath Siddappa

Reputation: 2157

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

ADD

margin:0 auto;//to center the page

text-align:center;

Fiddle

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

Upvotes: 1

Giannis Grivas

Reputation: 3412

Try thhis to your container class:

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

Upvotes: 1

Rohit Azad Malik

Reputation: 32192

Hey you forget to this

Define

your .container1 margin:0 auto;

.container1{
margin:0 auto;
}

Upvotes: 2

HTML center content in body tag

Answers (5)

Related Questions