第二行数据的对齐

Question

<table>
    <tr><td>test</td></tr>
    <tr>
        <td>
            <div style= height:200px;">
                <div  style="border:1px solid yellow; display: inline-block; width:100px">
                    <img src="orderedList4.png">
                </div>
                <div align="center" style="border:1px solid green;  display: inline-block; width:650px;height:100px;">
                    <div>center Test Header1</div>
                    <div>center Test Header2</div>
                </div>
                <div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
            </div>
        </td>
    </tr>
</table>

在上面的代码中，图像大小为75 * 75像素。

1. 我希望所有三个单元格的高度都为100像素。
2. 我希望图像居中并左对齐。
3. 中间文字居中。
4. 居中和右对齐的第三个文字。

我无法让它发挥作用。

Answer 1

内联样式是一个需要维护的噩梦，您通常应该尝试将演示文稿与内容分开。我已经移出了实际标签中的所有样式，因为你正在使用一个表并将每个div称为一个单元格，我猜你的意思是每个都有一个实际< / em> cell。

<style>
.product_table {
    width:  850px;
}
    .product_table td {
        height:         100px;
        border:         solid 1px #000;
        vertical-align: middle;
    }
        .product_table .image {
            width:      100px;
            border-color:   yellow;
            text-align: left;
        }
        .product_table .title {
            /* Automatically sizes its width */
            border-color:   green;
            text-align: center;
        }
        .product_table .release {
            width:      100px;
            border-color:   red;
            text-align: right;
        }
</style>

<table class="product_table">
    <tr>
        <th colspan="3">test</th>
    </tr>
    <tr>
        <td class="image">
            <img src="orderedList4.png" />
        </td>
        <td class="title">
            <div>center Test Header1</div>
            <div>center Test Header2</div>
        </td>
        <td class="release">
            REL 1.0
        </td>
    </tr>
</table>

最上面的行可能是表格的标题，因此您应该考虑将其移出表格h2或其中将使用的任何级别。并确保表格是最合适的元素在这里 - 除非你要有多行这个项目，你可能最好只使用没有表格的div。