使表格在移动设备上居中

Question

当移动设备访问时，如何将这些表对齐到中心位置？

我需要在没有媒体查询的情况下这样做，以支持Gmail移动应用程序。

HTML代码来自一个actionrocket代码，但我不知道是什么让表格以移动为中心，打破了桌面视图

http://codepen.io/actionrocket/pen/EoCLH

        <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed"> 
        <tr>
            <td>

            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
            <tr>
                <td>

                <table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
                <tr><td align="center">
                <!--[if mso]>
                    <table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
                <![endif]-->
                <!--[if (IE)]>
                    <table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
                <![endif]-->  


                <!--2 column-->
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>
                    <table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
                        <tr>
                        <td width="20"></td>
                        <td width="280" bgcolor="#ededed">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td>  
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td> 
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center">
                            <table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
                                <tr>
                                    <td width="15"></td>
                                    <td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    <a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    </td>
                                    <td width="15"></td>
                                </tr>
                                </table>
                            </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20" bgcolor="#ffffff"></td>
                            </tr>
                        </table>
                        </td>
                        <td width="20"></td>
                        </tr>
                    </table>
                    <!--[if mso]></td><td><![endif]-->
                    <table width="320" border="0" cellspacing="0" cellpadding="0" >
                        <tr>
                        <td width="20"></td>
                        <td width="280" bgcolor="#ededed">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td> 
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="2%"></td> 
                            <td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
                            <td width="2%"></td> 
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td align="center">
                            <table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
                                <tr>
                                    <td width="15"></td>
                                    <td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    <a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="100%" height="10"></td>
                                    </tr>
                                    </table>
                                    </td>
                                    <td width="15"></td>
                                </tr>
                                </table>
                            </td>
                            </tr>
                        </table>
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                            <td width="100%" height="20"></td>
                            </tr>
                        </table>
                        </td>
                        <td width="20"></td>
                        </tr>
                    </table>

                    </td>
                </tr>
                </table>    




                    </td></tr></table>
                <!--[if mso]>
                    </td></tr></table>
                <![endif]-->
                <!--[if IE]>
                    </td></tr></table>
                <![endif]-->



        </td></tr></table>
        </td></tr></table>

Answer 1

具有新设计的模块

不要使用表格进行设计

我认为你不应该使用表格进行设计，如果你要使用表格，你应该使用Why not use tables for layout in HTML?属性，例如：

display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;

MDN css display

不使用内联样式

我还看到你在使用内联CSS样式。简单地看What's so bad about in-line CSS?，维护你的代码变得非常困难和令人沮丧。

模块解决方案

我使用css-stylesheets (方便的东西)。在我看来，我并没有使用任何难以理解的css属性。定位是通过文本居中对齐完成的。(内联元素以位置居中)。添加了填充和边距，以使薄片有更多的空间。使用框大小调整:边框大小；即使我添加填充也保持大小。

width 100px padding-top: 20px + box-sizing的大小通常是100px的大小，而您维护的是。

这怎么会是移动友好的呢？

啊，很高兴你这么问。我在模块包装器上使用了内联块元素。

实际上，我调用了.module的section类。使用inline-block显示属性，元素可以换行。因此，如果页面上有很大的宽度，模块将一个接一个地显示。如果很少，它们将显示在另一个下面。

​

.module {
  display: inline-block;
  background-color: #ddd;
  width: 300px;
  height: 300px;
  padding-top: 30px;
  box-sizing: border-box;
  font-family: arial;
  text-align: center;
  margin: 5px;
}
.module img {
  display: block;
  margin: 0 auto;
  width: 100px;
}
.module h1 {
  font-weight: normal;
}
.invers {
  border: none;
  background-color: #aaa;
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  cursor: pointer;
}

<div class="wrapper">
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>
  </section>
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>

  </section>
  <br>
  <h1>HERE is what happens if the screen gets small:</h1>
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>
  </section>
  <br>
  <section class="module">
    <img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
    <h1>Module title goes here</h1>
    <p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
    <button class="invers">Call to Action</button>
  </section>
</div>

​

Answer 2

对于Gmail，您将很难做到这一点。因为每一列的包含表都是左对齐的，所以您不能确定地覆盖它们。你最好的选择是强制Gmail用户使用桌面视图，或者在创建电子邮件时考虑到Gmail和Outlook，然后使用CSS和媒体查询来允许iOS用户使用。