css - 在 td 中对三个表进行居中/样式化(用于响应式电子邮件模板)

Question

HTML代码如下:

<style>
table,tr,td{
    min-width:80px;
    min-height:80px;
    border:1px #B0B0B0 solid;
}

table.v_headtable{
width:100%;
margin:0 auto;
max-width:640px;
text-align:center;
}

</style>


<table align="center" class="v_headtable">
.
.
.
.
.
.
<tr>
    <td class="row rsocial">
        <table class="socialIcons">
            <tr><td><img src="../../Twitter.png" width="30" /></td></tr>
        </table>
        <table class="socialIcons">
            <tr><td><img src="../../fb.png" width="30" /></td></tr>
        </table class="socialIcons">
        <table height="30" class="socialIcons">
            <tr><td height="30"><img src="../../LinkedIn.png" width="30" /></td></tr>
        </table>
    </td>
</tr>

在上面的代码中，我无法将连续的表格居中。我希望表格在大屏幕上保持居中，在移动设备上应该向下移动

当前输出:

要求的输出:

Answer 1

将此 CSS 应用于您的 .socialIcons 类:

.socialIcons {
    display: inline-block;
}