1. 首頁
  2. 問答
  3. 展望07/13對齊問題

展望07/13對齊問題

2015-08-28 24 views
2

我有一個響應式電子郵件（電子郵件CSS內聯），我有2列，並在第二列中的文本不對齊中心的圖標。建議？展望07/13對齊問題

這似乎只在Outlook是發生在通過石蕊

<!-- Invite Information with icons --> 
 
      <table class="outer" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 600px; padding: 0;"> 
 
      <tr align="center" style="vertical-align: top; text-align: left; padding: 0;"> 
 
       <td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;"> 
 
       <center style="width: 100%; min-width: 580px;"> 
 
        <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 508px; margin: 0 auto; padding: 0;"> 
 
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
         <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"> 
 
         <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"> 
 
          <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top"> 
 
           <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;"> 
 
           <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
            <td class="text-pad" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px;" align="left" valign="top"> 
 
            <table class="full-table" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; padding: 0;"> 
 
             <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
             <td width="65" class="icon" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top"> 
 
              <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{24ee00f3-6d64-4acd-8b11-6458bd6a03c9}_icn-calendar.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left"> 
 
             </td> 
 
             <td valign="middle" class="text-pad-left icon-text" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px 10px;" align="left"> 
 
              <h5 elq-edit="true" class='eloqua-editable-content' style="color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; font-size: 22px; margin: 15px 0 0; padding: 0;" align="left">Friday, 11<sup>th</sup> - 13<sup>th</sup> September 2015</h5> 
 
             </td> 
 
             </tr> 
 
             <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
             <td width="65" class="icon" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top"> 
 
              <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{e02be391-bab6-4cf4-84a2-9ff6ca979b58}_icn-clock.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left"> 
 
             </td> 
 
             <td valign="middle" class="text-pad-left icon-text" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px 10px;" align="left"> 
 
              <h5 elq-edit="true" class='eloqua-editable-content' style="color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; font-size: 22px; margin: 15px 0 0; padding: 0;" align="left">7.00pm - Welcome Party</h5> 
 
             </td> 
 
             </tr> 
 
             <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
             <td width="65" class="icon" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top"> 
 
              <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{3a92ceeb-920c-48c8-b125-8877d00fcbe6}_icn-location-marker.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="left"> 
 
             </td> 
 
             <td valign="middle" class="text-pad-left icon-text" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px 10px;" align="left"> 
 
              <h5 elq-edit="true" class='eloqua-editable-content' style="color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; font-size: 22px; margin: 15px 0 0; padding: 0;" align="left">Evian Resort Hotel</h5> 
 
             </td> 
 
             </tr> 
 
            </table> 
 
            </td> 
 
            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td> 
 
           </tr> 
 
           </table> 
 
          </td> 
 
          </tr> 
 
         </table> 
 
         </td> 
 
        </tr> 
 
        </table> 
 
       </center> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <!-- END Invite Information with icons -->

來源

2015-08-28 Sal B

回答

0

運行我使用Zurb的油墨框架07 & 2013年看起來在其他瀏覽器和電子郵件客戶端的罰款。我能夠通過幾個mod來利用子列/子網格的功能。

<!-- Invite Information with icons --> 
 
      <table class="outer" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 600px; padding: 0;"> 
 
      <tr align="center" style="vertical-align: top; text-align: left; padding: 0;"> 
 
       <td class="center" align="center" valign="top" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;"> 
 
       <center style="width: 100%; min-width: 580px;"> 
 
        <table class="container" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: inherit; width: 508px; margin: 0 auto; padding: 0;"> 
 
        <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
         <td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"> 
 

 
         <!-- Start Row --> 
 
         <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"> 
 
          <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top"> 
 

 
           <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;"> 
 
           <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 

 
            <td class="two sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; min-width: 0px; width: 16.666666%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top"> 
 
            <center style="min-width: 65px; width: 100%;"> 
 
             <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{24ee00f3-6d64-4acd-8b11-6458bd6a03c9}_icn-calendar.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="center"> 
 
            </center> 
 
            </td> 
 
            <td class="ten sub-columns" valign="middle" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 83.333333%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left"> 
 
            <h5 elq-edit="true" style="font-size: 22px; color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; margin: 0; padding: 0;" align="left">Friday, 11<sup>th</sup> - 13<sup>th</sup> September 2015</h5> 
 
            </td> 
 
            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td> 
 
           </tr> 
 
           </table> 
 
          </td> 
 
          </tr> 
 
         </table> 
 
         <!-- END row --> 
 

 
         <!-- Start Row --> 
 
         <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"> 
 
          <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top"> 
 
           <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;"> 
 
           <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 

 
            <td class="two sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; min-width: 0px; width: 16.666666%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top"> 
 
            <center style="min-width: 65px; width: 100%;"> 
 
             <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{e02be391-bab6-4cf4-84a2-9ff6ca979b58}_icn-clock.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="center"> 
 
            </center> 
 
            </td> 
 
            <td class="ten sub-columns" valign="middle" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 83.333333%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left"> 
 
            <h5 elq-edit="true" style="font-size: 22px; color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; margin: 0; padding: 0;" align="left">7.00pm - Welcome Party</h5> 
 
            </td> 
 
            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td> 
 
           </tr> 
 
           </table> 
 
          </td> 
 
          </tr> 
 
         </table> 
 
         <!-- END row --> 
 

 
         <!-- Start Row --> 
 
         <table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;"> 
 
          <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 
          <td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top"> 
 
           <table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 508px; margin: 0 auto; padding: 0;"> 
 
           <tr style="vertical-align: top; text-align: left; padding: 0;" align="left"> 
 

 
            <td class="two sub-columns center" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: center; min-width: 0px; width: 16.666666%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="center" valign="top"> 
 
            <center style="min-width: 65px; width: 100%;"> 
 
             <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{3a92ceeb-920c-48c8-b125-8877d00fcbe6}_icn-location-marker.png" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; width: auto; max-width: 100%; float: left; clear: both; display: block;" align="center"> 
 
            </center> 
 
            </td> 
 
            <td class="ten sub-columns" valign="middle" style="vertical-align: middle; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; text-align: left; min-width: 0px; width: 83.333333%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left"> 
 
            <h5 elq-edit="true" style="font-size: 22px; color: #222222; font-family: 'Arial Bold', Arial, Helvetica, sans-serif; font-weight: bold; text-align: left; line-height: 1.3; word-break: normal; margin: 0; padding: 0;" align="left">Evian Resort Hotel</h5> 
 
            </td> 
 
            <td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top"></td> 
 
           </tr> 
 
           </table> 
 
          </td> 
 
          </tr> 
 
         </table> 
 
         <!-- END row --> 
 

 
         </td> 
 
        </tr> 
 
        </table> 
 
       </center> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <!-- END Invite Information with icons -->

來源

2015-08-28 20:59:45

相關問題

 相關問題