对齐
轻松对齐 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>‍
</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>‍
</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>‍
</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>‍
</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'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>‍
</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>‍
</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>‍
</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>‍
<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>‍
<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>‍
</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>‍
</body>
</html>演示
