我正在尝试将内容放在我的body标签中的简单HTML页面中。我希望机身宽度为100%,我的内部有一个带有设定宽度的容器div,我希望容器位于屏幕的中心。
我尝试将保证金设为0 auto
;不起作用,试图在body标签中设置align="center"
,不起作用。
这是我的页面,因为您可以看到它不在中心:http://jsbin.com/vifekivatabo/1/
我做错了什么?
答案 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自动; //使页面居中
文本对齐:中心;
<强>小提琴强>
答案 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>