李海鑫个人博客

在ecshop网站后台添加帮助中心，发现里面的文章往左靠拢，没有居中，如下图所示：

ecshop-help-to-center-01

只要通过到对应的模板下css/component.css文件，找到下面代码

/* ==================== 网店帮助分类 ==================== */
#globalHelp {
width: 918px;
margin-left: 20px;
}
#globalHelp th {
text-align: left;
color: #0b54ab;
padding: 10px 30px 0;
}
#globalHelp td {
vertical-align: top;
padding: 5px 30px 20px;
}
#globalHelp td a {
color: #5fb0dc;
}

修改为：

/* ==================== 网店帮助分类 ==================== */
#globalHelp {
width: 918px;
margin-left: 20px;
}
#globalHelp table {
margin:0 auto;
}
#globalHelp th {
text-align: left;
color: #0b54ab;
padding: 10px 60px 0;
}
#globalHelp td {
vertical-align: top;
padding: 5px 60px 20px;
}
#globalHelp td a {
color: #5fb0dc;
}

其中我在#globalHelp td和#globalHelp th中的padding原来的30px修改为60px,同时增加#globalHelp table css类，重新打开文件，已经居中：

ecshop-help-to-center-02

关于padding的用法如下：

四个边的 padding 均为 10px：
h1 {padding: 10px}

上边和下边的 padding 为 10px，左边和右边的 padding 是父元素宽度的 2%：
h1 {padding: 10px 2%}

上边的 padding 为 10px，左边和右边的 padding 是父元素宽度的 2%，下边的 padding 是 15px：
h1 {padding: 10px 2% 15px}

上边的 padding 为 10px，右边的 padding 是父元素宽度的 2%，下边的 padding 是 15px，而左边的 padding 是 20px：
h1 {padding: 10px 2% 15px 20px}

更多padding用法可参考如下文件：http://www.w3school.com.cn/css/pr_padding.asp