如何垂直对齐div文本？

Question

I have 2 div floating side by side.

The div on the left is a part number, only one line. The div on the right is a product description and can have multiple lines.

How can I vertically align the left div text when the right div grows to 2 or more line.

Here is the code.

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

Here is the CSS

.left {
    float: left;
}
.prodNumber {

}

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

Answer 1

The div to have it's content centered needs the display: table-cell

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

The display:table-cell is what allows an element to have children vertically aligned, so it has to be on the parent to be able to have the children aligned vertically.

Here's a working JSFiddle demo .

Answer 2

Use 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);
    }
});

Should work, but I didnt test it. sorry.

Answer 3

the most proven solution is to apply main container as display:table; and the children as display:table-cell. Since as per ur requirement you want the both prodNumber & prodDesc to be dependent on each other hence please add one outside wrap which holds both these elements. See working file here: url http://jsfiddle.net/wZ3n3/

PS: append more texts.

Hope you got answer.

Answer 4

Use table instead of 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

Use somthing like this

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