在3列中居中元素，使其在各自的宽度内。宽度小于480px时左对齐

Question

我有三样东西1)电话号码，2)社交图标和3)电子邮件。首先，我希望所有三个都放在各自宽度的中心。

然后，当移动屏幕尺寸小于480px时，所有的屏幕都必须左对齐，一个接一个地放置在1、2、3的下方(就像响应式设计一样)。

我这样做是为了一个响应式的HTML电子邮件模板。帮帮我！

​

<tr>
  <td class="cols-wrapper" style="padding-left:12px;padding-right:12px"><br>
  <!--[if mso]>
    <table border="0" width="576" cellpadding="0" cellspacing="0" style="width: 576px;">
    <tr><td width="192" style="width: 192px;" valign="top"><![endif]-->
    <table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
      <tr>
        <td class="col" valign="top" style="padding-left:12px;padding-right:12px;">
          <p>Phone: <a style="color:#00a5e7; border-bottom:none;" href="tel:+044 4000 2323">044 1234 5678</a></p>											
        </td>
      </tr>
    </table>
      <!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
    <table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
      <tr>
      <td class="col" valign="top" style="padding-left:12px;padding-right:12px;padding-top:10px;">
       <a href="" target="_blank"><img style="float:left;" src="https://cdn0.iconfinder.com/data/icons/social-network-7/50/3-20.png"></a>
      <a href=""><img style="padding:0px 8px; float:left;" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-20.png"></a>
      <a href="" target="_blank"><img src="https://cdn3.iconfinder.com/data/icons/social-media-chamfered-corner/154/google_plus-20.png"></a>
      </td>
      </tr>
    </table>
      <!--[if mso]></td><td width="192" style="width: 192px;" valign="top"><![endif]-->
    <table width="192" border="0" cellpadding="0" cellspacing="0" align="left" class="force-row" style="width: 192px;">
      <tr>
      <td class="col" valign="top" style="padding-left:12px;padding-right:12px;">
        <p><a style="color:#00a5e7; border-bottom:none;" href="" target="_top">hi@website.com</a></p>
      </td>
      </tr>
    </table>
    <!--[if mso]></td></tr></table><![endif]-->

  </td>
  </tr>

​

Answer 1

有几点我想提一下。

1. 首先在您的代码中删除这个表结构--这是无用的、过时的，并且增加了不必要的complexity.
2. Use bootstrap并在3个divs中添加col-md-4，并使用div { text-align: left }将您的3个以div { text-align: center }和col-xs-12为中心的对象放在其中，例如：< code >H211
3. 即使您不想使用bootstrap，也可以像我在media query中所说的那样编写相同的代码，例如：

@纯媒体屏幕和(最大宽度:1024px){ div{显示:内嵌块；宽度:33%；文本对齐:居中；}}@仅媒体屏幕和(最大宽度: 480px){ div {显示:块；文本对齐:左；} }

Answer 2

试着用一个div来表示.coles-wrapper，去掉内联的“float-style”--添加这个CSS，就可以开始了。=)

<style media="screen">
    .cols-wrapper table{
        width: 33.33% !important;
        text-align: center;
    }
    @media (max-width: 480px) {
        .cols-wrapper table{
            width: 100% !important;
            text-align: left;
        }
    }
</style>