如何垂直对齐div文本？

Question

我有2 div并排漂浮。

左侧的div是部件号，只有一行。 右边的div是产品说明，可以有多行。

当右div增长到2或更多行时，如何垂直对齐左div文本。

这是代码。

<td>
   <div class="prodNumber left partNumSizexSmall">
      <a href="link" style="color:blue;text-decoration:underline;"><b>PartNum</b></a>
   </div>
   <div class="prodDesc xsmallDesc left">
      ProductDescription1
   </div>
</td>

这是CSS

.left {
    float: left;
}
.prodNumber {

}

.prodDesc {
    padding-left: 8px;
    padding-right: 8px;
}
.partNumSizexSmall {
    min-width: 50px;
}
.xsmallDesc {
    max-width: 550px;
}

Answer 1

要使其内容居中的div需要display: table-cell

.center_me {
    height: 200px;
    vertical-align: middle; 
    display:table-cell;
}

display:table-cell是允许元素的子元素垂直对齐的元素，因此必须在父元素上才能使子元素垂直对齐。

这是一个正在运行的JSFiddle演示 。

Answer 2

使用行高。

$("document").ready(function(){
    var newheight = $(".prodDesc").height();
    var newheight2 = $(".prodNumber").height();
   if( newheight > newheight2 ){
        $(".prodNumber").css("line-height", newheight);
    }else if( newheight2 > newheight ){
         $(".prodDesc").css("line-height", newheight2);
    }
});

应该可以，但是我没有测试。 抱歉。

Answer 3

最成熟的解决方案是将主容器用作display：table; 子级显示为：table-cell。 由于根据您的要求，您希望prodNumber和prodDesc都相互依赖，因此请添加一个包含这两个元素的外部包装。 在此处查看工作文件： url http://jsfiddle.net/wZ3n3/

PS：追加更多文字。

希望你能回答。

Answer 4

使用表格代替div

         <td>
            <table>
                <tr>
                    <td class="prodNumber left partNumSizexSmall">
                        <a href="link" style="color: blue; text-decoration: underline;"><b>PartNum</b></a>
                    </td>
                    <td class="prodDesc xsmallDesc left">
                        ProductDescription1 ProductDescription1 ProductDescription1 ProductDescription1
                        ProductDescription1 ProductDescription1 ProductDescription1 ProductDescription1
                        Product Description1 Product Description1 Product Description1 Product Description1
                    </td>
                </tr>
            </table>
        </td>

Answer 5

用这样的东西

<div align="center">
This is some text!
</div>