基礎

對齊

輕鬆在 HTML 電子郵件中置中圖片、文字、按鈕和選單。

Foundation 包含一些有用的對齊課程，可將常見定位行為新增到元素中。

文字對齊

您可以使用 .text-x 課程對齊文字。這些課程將套用於大型中斷點以及小型中斷點。

HTML
<style>.columns {border: 1px solid #333;}</style>
<container>
  <row>
    <columns>
      <p class="text-left">Left (default)</p>
    </columns>
    <columns>
       <p class="text-center">center</p>
    </columns>
    <columns>
       <p class="text-right">right</p>
    </columns>
  </row>
</container>
<html>

<head>
  <style>
    .columns {
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-4 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="text-left">Left (default)</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="text-center">center</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="text-right">right</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

如果您只需要在小型中斷點上變更文字對齊，可以使用 .small-text-x 課程。

HTML
<style>.columns {border: 1px solid #333;}</style>
<container>
  <row>
    <columns>
      <p class="small-text-left">Left on small</p>
    </columns>
    <columns>
       <p class="small-text-center">Center on small</p>
    </columns>
    <columns>
       <p class="small-text-right">Right on small</p>
    </columns>
  </row>
</container>
<html>

<head>
  <style>
    .columns {
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-4 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="small-text-left">Left on small</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="small-text-center">Center on small</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="small-text-right">Right on small</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

您可以結合這些課程來覆寫小型中斷點上的行為。

HTML
<style>.columns {border: 1px solid #333;}</style>
<container>
  <row>
    <columns>
      <p class="text-center small-text-left">Center, small left</p>
    </columns>
    <columns>
       <p class="text-right small-text-center">Right, small center</p>
    </columns>
  </row>
</container>
<html>

<head>
  <style>
    .columns {
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-6 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="text-center small-text-left">Center, small left</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-6 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <p class="text-right small-text-center">Right, small center</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

置中圖片

只要將 <center> 包圍在您要使用的圖片周圍即可。Inky 將處理幕後的魔法！在 CSS 版本中，您將新增 .float-center 課程、align="center" 屬性，並包圍 <center> 標籤，以確保內容置中。

HTML
<container>
  <row>
    <columns>
      <center>
        <img src="https://placehold.it/200?text=center" alt="image of clever meme that made me chuckle">
      </center>
    </columns>
  </row>
</container>
<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <center>
                            <img src="https://placehold.it/200?text=center" alt="image of clever meme that made me chuckle" align="center" class="float-center">
                          </center>
                        </th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

因此，說清楚一點：使用 Inky，您只需要將圖片包圍在 <center> 標籤中，就能可靠地將其置中。

在 CSS 版本中，我們的置中配方包括三個成分

  • <img> 元素上的 .float-center 課程
  • <img> 元素上的 align="center" 屬性
  • 用 <center> 標籤包住 <img>（適用於 Outlook 2007、2010 和 2011）

此外，它並非真的浮動，但 .float-center 類別會讓元素使用自動邊界置中技巧。請注意，這只會對具有絕對寬度的元素有效，表示不是百分比或自動寬度。

如果您只需要在行動裝置用戶端置中圖片，您可以套用 .small-float-center 類別。一個好的使用案例會是在 iPhone 5、iPhone 6 和 Android 4.4 等裝置上置中比整欄寬度小的圖片。

HTML
<container>
  <row>
    <columns small="12" large="3" class="large-offset-1">
      <img class="small-float-center" src="https://placehold.it/200?text=small-center" alt="please don't forget me">
    </columns>
    <columns small="12" large="8">
      <h4 class="small-text-center">What is the deal?</h4>
      <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
    </columns>
  </row>
</container>
<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="large-offset-1 small-12 large-3 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <img class="small-float-center" src="https://placehold.it/200?text=small-center" alt="please don&apos;t forget me">
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-8 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <h4 class="small-text-center">What is the deal?</h4>
                          <p class="small-text-center">Sweet beast sun bathe or chase mice rub face on everything or leave dead animals as gifts for mark territory play time.</p>
                        </th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

將圖片置左或置右

您也可以將圖片置左或置右。

HTML
<container>
  <row>
    <columns>
      <img class="float-left" src="https://placehold.it/200?text=left" alt="">
      <img class="float-center" src="https://placehold.it/200?text=center" alt="">
      <img class="float-right" src="https://placehold.it/200?text=right" alt="">
    </columns>
  </row>
</container>
<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <img class="float-left" src="https://placehold.it/200?text=left" alt>
                          <img class="float-center" src="https://placehold.it/200?text=center" alt>
                          <img class="float-right" src="https://placehold.it/200?text=right" alt>
                        </th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

置中按鈕

用 <center> 標籤包住按鈕以置中。

HTML
<container>
  <row>
    <columns>
      <center>
        <button href="#">Centered Button</button>
      </center>
    </columns>
  </row>
</container>
<html>

<head></head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-12 columns first last">
                  <table>
                    <tbody>
                      <tr>
                        <th>
                          <center>
                            <table class="button float-center">
                              <tbody>
                                <tr>
                                  <td>
                                    <table>
                                      <tbody>
                                        <tr>
                                          <td><a align="center" href="#">Centered Button</a></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </center>
                        </th>
                        <th class="expander"></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

置中欄位

表格本質上會佔用所有可用的空間。因此，置中欄位的方式是新增空白欄位到要置中的欄位左右兩側。

HTML
<style>.columns {border: 1px solid #333;}</style>
<container>
  <row>
    <columns></columns>
      <columns>Centering a column</columns>
    <columns></columns>
  </row>
  <row>
    <columns></columns>
      <columns small="3">Centering a column</columns>
    <columns></columns>
  </row>
  <row>
    <columns></columns>
      <columns small="7">Centering a column</columns>
    <columns></columns>
  </row>
</container>
<html>

<head>
  <style>
    .columns {
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <table align="center" class="container">
    <tbody>
      <tr>
        <td>
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-4 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns">
                  <table>
                    <tbody>
                      <tr>
                        <th>Centering a column</th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-4 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-3 large-3 columns">
                  <table>
                    <tbody>
                      <tr>
                        <th>Centering a column</th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
          <table class="row">
            <tbody>
              <tr>
                <th class="small-12 large-4 columns first">
                  <table>
                    <tbody>
                      <tr>
                        <th></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-7 large-7 columns">
                  <table>
                    <tbody>
                      <tr>
                        <th>Centering a column</th>
                      </tr>
                    </tbody>
                  </table>
                </th>
                <th class="small-12 large-4 columns last">
                  <table>
                    <tbody>
                      <tr>
                        <th></th>
                      </tr>
                    </tbody>
                  </table>
                </th>
              </tr>
            </tbody>
          </table>&zwj;
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

示範

如果您沒有新增大小屬性，例如 small="x"，則欄位會等寬。

置中選單

置中選單是很常見的做法。用 <center> 標籤包住選單即可達成。

HTML
<center>
  <menu>
    <item href="https://zurb.com">Item</item>
    <item href="https://zurb.com">Item</item>
    <item href="https://zurb.com">Item</item>
  </menu>
</center>
<html>

<head></head>

<body>
  <center>
    <table align="center" class="menu float-center">
      <tbody>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <th class="menu-item float-center"><a href="https://zurb.com">Item</a></th>
                  <th class="menu-item float-center"><a href="https://zurb.com">Item</a></th>
                  <th class="menu-item float-center"><a href="https://zurb.com">Item</a></th>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

</html>

示範

垂直置中

您可以使用 valign 屬性在欄位內垂直置中您的內容。可用的值有 top、middle 和 bottom。

HTML
<row>
  <columns large="3" valign="top">
    <img class="float-right" src="https://placehold.it/50" alt="">
  </columns>
  <columns large="3" valign="bottom">
    <h4>Bottom</h4>
  </columns>
  <columns large="3" valign="middle">
    <h4 style="margin-bottom: 0;" class="text-right">HEADLINE</h4>
    <p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
  </columns>
  <columns large="3" valign="middle">
    <img class="small-float-center" src="https://placehold.it/250" alt="">
  </columns>
</row>
<html>

<head></head>

<body>
  <table class="row">
    <tbody>
      <tr>
        <th class="small-12 large-3 columns first" valign="top">
          <table>
            <tbody>
              <tr>
                <th>
                  <img class="float-right" src="https://placehold.it/50" alt>
                </th>
              </tr>
            </tbody>
          </table>
        </th>
        <th class="small-12 large-3 columns" valign="bottom">
          <table>
            <tbody>
              <tr>
                <th>
                  <h4>Bottom</h4>
                </th>
              </tr>
            </tbody>
          </table>
        </th>
        <th class="small-12 large-3 columns" valign="middle">
          <table>
            <tbody>
              <tr>
                <th>
                  <h4 style="margin-bottom: 0;" class="text-right">HEADLINE</h4>
                  <p style="margin-bottom: 0;" class="text-right subheader">SUBHEADLINE</p>
                </th>
              </tr>
            </tbody>
          </table>
        </th>
        <th class="small-12 large-3 columns last" valign="middle">
          <table>
            <tbody>
              <tr>
                <th>
                  <img class="small-float-center" src="https://placehold.it/250" alt>
                </th>
              </tr>
            </tbody>
          </table>
        </th>
      </tr>
    </tbody>
  </table>&zwj;
</body>

</html>

示範


ZURB 大師班 響應式電子郵件

在此線上課程中，您將學習如何快速設計和開發響應式電子郵件，讓電子郵件在幾乎所有螢幕、瀏覽器和電子郵件用戶端上看起來都很美觀，甚至包括 Outlook。

瞭解電子郵件基礎

電子郵件基礎

電子郵件基礎是 ZURB 所建立的響應式 HTML 電子郵件架構，ZURB 是一家位於加州坎貝爾的產品設計公司。此架構是自 1998 年以來建立網路產品和服務的成果。

想要更多嗎？

與我們交談

在推特上關注我們
@ZURBfoundation

參與
我們令人驚豔的社群。

保持最新資訊

掌握 Foundation 的最新資訊。在 Github 上找到我們。

保持聯繫

© 1998‐2018 ZURB, Inc. 保留所有權利。