css - 对齐第二行数据

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称为一个单元格，我猜您的意思是让每个样式都成为一个实际的单元格。

<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没有表格的 s 。