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允许元素垂直对齐，因此必须在父元素上才能让子元素垂直对齐。

这是working JSFiddle demo。

Answer 2

使用line-height。

$("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和amp; 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>

如何垂直对齐div文本？

5 个答案: