我创建了简单的asp页面，现在我的页面看起来像http://s7.postimg.org/fd9rw9ujv/Untitled_1_copy.png
我需要在页面的中心设置表格，所以我需要修改我唯一的HTML和CSS。
我很困惑，因为代码包含在asp中，我需要像http://s21.postimg.org/ot42edul3/Invite.jpg
这样的东西Html代码：
但是所有需要的html都包含在上面的jsfiddle链接中。
任何人都可以帮助我吗？提前谢谢。
答案 0 :(得分：1)
将整个表格包含在带有样式类的div中。所以在你的JSFiddle
中包含的第一行
<div class="widthContainer">
并关闭最后一行的div
</div>
并使用CSS
将该div的内容居中.widthContainer {
width: 450px;
margin: auto;
}
我将宽度设为450px，因为这是表格标签上内联所示的表格宽度。
一些其他款式可以帮助您入门
.widthContainer {
width: 450px;
margin: auto;
border: 1px solid #ccc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.invitation-header {
background-color: #eee;
text-align: center;
padding: 2em;
border-bottom: 1px solid #ccc;
}
还有一个p标签推出宽度
<p style="font-size: 11px; width: 565px;">
将其更改为
<p style="font-size: 11px;">
更新了JSFiddle
您希望通过
来整理表格单元格中的填充答案 1 :(得分：0)
在其中使用 div 标记并尝试以下代码：
**<div style="text-align: center">**
<table border="1" cellpadding="0" cellspacing="0" class="tblmain atep" style="width:450px; margin: 0 auto;">
<tr>
<td align="left" class="tdbodycontent">
<table cellpadding="0" cellspacing="0" class="wrapper" style="width:450px;margin:0 auto;">
<tr>
<td class="tdcontainer" align="left">
<table cellpadding="0" cellspacing="0" border="0" style="width:450px;" id="tbl-two-columns">
<tr>
<th class="invitation-header" valign="top"> <!-- th added for invite header --selva -->
Help make your neighborhood safer, Invite friends and family
</th> <!-- END - th added for invite header --selva -->
</tr>
<table cellpadding="0" cellspacing="0" id='tab1' class="tab-container" style="width:400px;">
<tr>
<td valign="top">
<form method="post" name="form1" action="invitation_enrollv5.asp?action=1" onsubmit="return GetTextValue()">
<!--START - Invite Buttons - Selvarani-->
<table cellpadding="0" cellspacing="0" border="0" style="margin:0 auto 10px auto;width:350px;">
<div id="main"><a style="float:right;" href="#" id="btAdd" value="" class="bt" />Invite more friends</a></div>
<input type="hidden" id="contact_list" name="contact_list" value="" />
<!--END - Invite Buttons - Selvarani-->
</table>
<p style="">Invite from my address book</p>
<img src="Web5/images/invite-your-contacts.png" style="cursor:pointer;" alt="Invite your contacts" onclick="InviteBoxClick();" /><br />
<a class="cs_import">
</a>
</form>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" id='tab2' class="tab-container">
<tr>
<td valign="top">
<form id="form2" name="form1" method="post" action="invitation_enrollv5.asp?action=4">
<p>
Your invitations automatically include a message about AlertID, but it is always
more personal and effective if you include a short invitation note. You may edit
or remove the default copy below.<br />
<textarea name="cnote" id="cnote" cols="48" rows="7"></textarea>
</p>
<br />
<input type="hidden" name="contact_list" value="" />
<input type="hidden" name="pkfamilyinvite" value="" />
<input type="hidden" name="fincomplete" value="" />
<input type="hidden" name="vn" value="" />
<input type="hidden" name="gORn" value="" />
<p>
Send a preview to yourself to check your invitation(s) before sending to others.<br />
<input type="submit" value="Send Preview to My Email" name="submit2" title="send preview to " />
<br />
<p>
Click below to send your invitations now.<br />
<input type="submit" value="Send Invitations" name="submit2" />
</p>
<br />
<p style="font-size: 11px; width: 565px;">
By using this invitation system, I certify that the email addresses I entered above
are of persons I know and for whom I have a pre-existing relationship. I am not
sending invitations to individuals I do not personally know or do not have some
relationship to me or my group. You are limited to approximately 150 email addresses
here. If you have more than that, please contact support who will gladly help you.
<a href="mailto:community-1@alerts.alertid.com">community-1@alerts.alertid.com.</a></p>
<br />
<input name="submit2" type="submit" value="<< Back - To Contacts" />
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" class="tdfooter">
<div class="wrapper">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>