html - asp页面如何对齐表格？

Question

我创建了简单的 asp 页面，现在我的页面看起来像这样 http://s7.postimg.org/fd9rw9ujv/Untitled_1_copy.png

我需要在页面中心设置表格，所以我需要修改我仅有的 HTML 和 css。

我只是困惑，因为代码包含在 asp 中，我需要这样的东西 http://s21.postimg.org/ot42edul3/Invite.jpg

HTML代码:

但是所有需要的 html 都包含在上面的 jsfiddle 链接中。

谁能帮帮我？提前致谢。

Answer 1

将整个表格包裹在一个带有样式类的 div 中。所以在你的 JSFiddle 中包含的内容的第一行

<div class="widthContainer">

并关闭最后一行的div

</div>

并使用 CSS 将那个 div 的内容居中

.widthContainer {
    width: 450px;
    margin: auto;
}

我将宽度设置为 450 像素，因为这是表格的宽度，如表格标签中内联所述。

http://jsfiddle.net/8tw43x89/

一些额外的样式让你开始

.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

http://jsfiddle.net/97nk3tu3/

虽然你会想要整理表格单元格中的填充