Magento页面格式

Question

我正在尝试在Magento上设置销售页面的样式。这是页面：http://petpresto.com.au/why-choose-us/

我去CMS＆gt;页面并创建一个看起来很棒的页面。它全部居中并垂直对齐。但是当我发布页面并在网站上直播时，它看起来很糟糕。我做错了什么？

我需要帮助的具体信息：

1. 垂直对齐单元格表格中的文字
2. 居中对齐页面
3. 使页面背景白色
4. 文字和图片响应（如果可能？）
5. 在Chrome上，前三个图像缩小了大小，但在Firefox或资源管理器上没有缩小。为什么会发生这种情况，我该如何解决这个问题？

我疯了，试图让这看起来有点体面，请帮忙！

SCREENSHOT：这是编辑器的截图，显示它应该是什么样子。它显示了前几个表格/单元格，页面的其余部分在向下滚动时看起来很相似。



下面粘贴代码的完整副本。

<p style="text-align: center;"><strong><span style="font-size: xx-large;">Why Choose Us?</span></strong></p>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Free Express Shipping" src="http://petpresto.com.au/images/free-delivery256.jpg" alt="Free Express Shipping" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">FREE Express Shipping</span></strong></p>
<p>You get FREE&nbsp;<strong>Express Delivery</strong>&nbsp;with Australia Post.</p>
<p>Anything you order by 4pm (AEST) will be shipped the same day. Tracking number will be provided so you can follow the parcel on the Australia Post website.</p>
<p>Items under 1kg and in metro areas will arrive the next business day, others a maximum of three days.&nbsp;Super fast!</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Money Back Guarantee" src="http://petpresto.com.au/images/money-back-guarantee256.png" alt="Money Back Guarantee" width="256" height="239" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Money Back Guarantee</span></strong></p>
<p>You're covered by our famous FULL 100% No Questions Asked Money Back Guarantee!</p>
<p>If you want your money back just return the product within 28 days and we'll give you a<strong> full refund, no questions asked.</strong> Additional shipping is the buyers responsibility.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Two Year Warranty" src="http://petpresto.com.au/images/2-year-warranty256.png" alt="Two Year Warranty" width="256" height="195" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Two Year Warranty</span></strong></p>
<p>You get a&nbsp;2 Year Warranty&nbsp;covering any defects.</p>
<p>We go to great lengths to ensure our products outlast the competition in every way - but in the rare case that something does go wrong just contact us for a&nbsp;<strong>free replacement or refund</strong>.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Warehouse Pricing" src="http://petpresto.com.au/images/warehouse256.png" alt="Warehouse Pricing" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Discount Warehouse Price</span></strong></p>
<p>Your products are<strong> shipped&nbsp;direct from our Sydney warehouse.</strong></p>
<p>This cuts out any middle man and reduces business expenses.</p>
<p>All of those savings are then passed on to you. So you get the lowest possible price!</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="Australian Business" src="http://petpresto.com.au/images/Australia-Flag256.png" alt="Australian Business" width="256" height="256" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Australian Business</span></strong></p>
<p>We are&nbsp;100% Australian owned and operated.</p>
<p>Buying Australian gives you peace of mind. We are just around the corner if you need any help.</p>
<p>Plus you get that warm fuzzy feeling for supporting a genuine Ozzie business.</p>
</td>
</tr>
</tbody>
</table>
<p><img style="width: 100%; height: 15px;" src="http://www.petpresto.com.au/images/divider_line.png" alt="" /></p>
<table style="width: 600px;" border="0" cellspacing="10" align="center">
<tbody>
<tr>
<td><img title="All Cards Welcome" src="http://petpresto.com.au/images/visa-mastercard256.png" alt="All Cards Welcome" width="256" height="281" /></td>
<td>
<p style="text-align: center;"><strong><span style="font-size: x-large;">Safe and Secure Payment</span></strong></p>
<p>Your payment is safley and securley processed through our PCI-DSS certified payment processor.</p>
<p>We accept all major cards including Visa, Mastercard, American Express, Dinners Club, and more.</p>
</td>
</tr>
</tbody>
</table>

Answer 1

检查下面的代码，看看它是否符合您的需求。

.std table {
    float:none; 
    margin: auto;
 }

.std img {
    height:138px;
    width:138px;
    /* max-width: 100%; remove this */
}

<强> EXAMPLE FIDDLE

现在有一件事我不太明白......你想要背景颜色是不是白色？如果您使用正在使用的#f7f7f6;，则会出现一些图像问题，因为并非所有图像都是透明的，无法与背景混合。

Answer 2

确定，

在您的代码中：

<table cellspacing="10" border="0" align="center" style="width: 600px;">

更改：

<table cellspacing="10" border="0" align="center" style="width: 600px; float:none; margin: auto;">

这解决了你的问题。我建议为表标记创建一个类，并将此css放在一个文件中。

干杯，