Css 第二行数据的对齐 测试

内联样式是一个需要维护的噩梦，您通常应该尝试将表示与内容分开。我已经将所有样式移出了实际的标记，因为您使用的是一个表，并将每个

div

引用为一个单元格，所以我猜您的意思是让每个都成为一个实际的单元格

.product_表{
宽度：850px；
}
.product_表td{
高度：100px；
边框：实心1px#000；
垂直对齐：中间对齐；
}
.product_表.图像{
宽度：100px；
边框颜色：黄色；
文本对齐：左对齐；
}
.product_表.标题{
/*自动调整其宽度*/
边框颜色：绿色；
文本对齐：居中；
}
.product_表.发布{
宽度：100px；
边框颜色：红色；
文本对齐：右对齐；
}
测试
中心测试头1
中心测试头2
REL 1.0

---

上行可能是一个表标题，所以你应该考虑把它移出表作为<代码> H2 < /代码>或它将被使用的任何级别。并确保表是此处最合适的元素–除非您将有多行此项，否则最好只使用不带表的

div

s。

尝试更改不同div标记的高度属性。等等。还没有结果。令人困惑的帖子令人困惑。用桌子。你想喝一杯吗？

<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>

<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>