How to vertically align div text?

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

See here: [enter link description here][1] [1]: http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div — maskeda, Feb 10 '14 at 19:14
I had this exact problem with multi-line text and I wanted a CSS solution that didn't require table-cell - there's an alternate solution here http://stackoverflow.com/questions/13994549/trouble-vertically-centering-text-in-another-div-with-relative-sizing — cirrus, Feb 10 '14 at 23:18

score 0 · Answer 1 · answered Feb 10 '14 at 19:26

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.

score 0 · Answer 2 · 2014-02-10T19:56:13.847

0

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.

edited Feb 10 '14 at 19:56

answered Feb 10 '14 at 19:42

Doesn't work for multi-line text which is exactly what the OP says he has. – j08691 Feb 10 '14 at 19:46
Good point threw in an edit. I was only thinking about the right side before being multi-line. That should be better. If not, Ill let someone else answer it. Thanks for pointing that out. – Feb 10 '14 at 19:57

score 0 · Answer 3 · answered Feb 10 '14 at 20:00

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: urlhttp://jsfiddle.net/wZ3n3/

PS: append more texts.

Hope you got answer.

score 0 · Accepted Answer · answered Feb 10 '14 at 21:04

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>

score -1 · Answer 5 · answered Feb 10 '14 at 19:21

-1

Use somthing like this

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

answered Feb 10 '14 at 19:21

SimplePi

95
1
4
15

Align is a deprecated attribute http://www.w3.org/TR/html4/present/graphics.html#h-15.1.2 – j08691 Feb 10 '14 at 19:37
Not only does it not work, it's not even the correct outdated way to *vertically* center something. http://jsfiddle.net/j08691/q2J9k/ – j08691 Feb 10 '14 at 19:40

How to vertically align div text?

5 Answers5