html - 在各自的宽度内将 3 列中的元素居中。当宽度低于 480px 时，对齐左边的所有内容

Question

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

然后，当缩小到移动屏幕尺寸时，比如说低于 480 像素，所有这些都必须左对齐并定位在一个接一个 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. 首先在您的代码中删除此表结构——它无用、过时并增加了不必要的复杂性。

2. 使用 bootstrap 并在 3 个 div 中添加 col-md-4 并将您的 3 个居中对象放入其中 div { text-align: center } 和 col-xs-12 在所有 3 个中都带有 div { text-align: left } ，比如:

   <div class="col-md-4 col-xs-12>item 1 </div> 
   <div class="col-md-4 col-xs-12>item 2 </div> 
   <div class="col-md-4 col-xs-12>item 3 </div> 
   

3. 即使您不想使用像bootstrap 这样的框架，也可以按照我在media query 中所说的那样编写相同的代码。 ，例如:

   @media only screen and (max-width:1024px){
      div{ 
          display:inline-block;
          width:33%;
          text-align:center;
      }
   }
   
   @media only screen and (max-width: 480px){
      div {
           display:block;
           text-align:left;
      }
   }