Question

我尝试以下方法：表，有2列。第二列我希望3组文本以不同方式对齐。我试过这样的事情：

<table>
<tr>
    <td>
        <image>
    </td>
    <td>
    <table>
       <tr align="top">
            <text at the top>
       </tr>
       <tr align="center">
              <text in the middle>
        </tr>
        <tr align="bottom">
              <text at the bottom>
        </tr>
     </table>
     </td>
</tr>
</table>

Answer 1

在element中添加样式永远不会给我正确的输出，所以将它应用于elemment

CSS表

.top td
{
  vertical-align:top;
}

.middle td
{
  vertical-align:middle;
}

.bottom
{
 vertical-align:bottom;
}



<table>
   <tr class="top">
        <text at the top>
   </tr>
   <tr class="center">
          <text in the middle>
    </tr>
    <tr class="bottom">
          <text at the bottom>
    </tr>
 </table>

Answer 2

根据代码草图中的单词，您似乎希望单元格内容垂直对齐。然后使用的属性是valign，而不是align（水平对齐）。对于它，居中的值是middle，而不是center。

此外，标记中的方法不必要地复杂化。嵌套表是有效的，但很少需要，而且大多数情况下它们使事情变得更加困难。通过使用具有两列的单个表，可以更容易地实现预期的布局，以便第一个单元格跨越所有行。在下面的示例中，我添加了边框以显示结构。另请注意，在图像上设置了display: block，因为默认情况下，图像位于文本基线上，在其下方留下几个像素的空白区域，这在这里可能是不可取的。

<table border>
<tr>
    <td rowspan="3">
        <img src="http://www.lorempixel.com/100/170" alt=""
             style="display: block">
    <td valign="top">
        Text at the top.
<tr>
    <td valign="middle">
        Text in the middle.
<tr>
    <td valign="bottom">
        Text at the bottom.
</table>

使用CSS而不是表示HTML属性是一个不同的问题。另一个问题是你是否应该只使用表格进行布局，就像你显然在做的那样。在这些问题上不乏“讲座”，所以我专注于回答似乎是什么问题。

表3文本对齐类型

2 个答案: