3

I have a div tag with a specific width that will receive a text through javascript. 

<div id="titleTop" style="width:400px; height:25px; padding-top:15px;"></div>

And whenever the length of that text exceeds the width, the div should adjust its padding, so the 2nd line of the text isn't obscured by the other div positioned below.

if(document.getElementById("titleTop").innerHTML.length >= 70){

    document.getElementById("titleTop").style.paddingTop = 5 + "px";
    document.getElementById("titleTop").style.height = 35 + "px";
}

My problem is this method isn't very reliable. Is there any way to detect if the text triggered multiple lines inside the div? Or to have the padding adjust itself proportionately?

EDIT: Just to make things clear, my problem isn't with the height of the div (it has to stay 40px high at all times), but with aligning the text vertically within it

Catpixels
  • 375
  • 1
  • 5
  • 14
  • 3
    Just don´t use a fixed height. – Amberlamps Nov 30 '12 at 12:08
  • In this case I have to. I was requested to use fixed measurements – Catpixels Nov 30 '12 at 12:16
  • use a fixed height, but no padding. simple align the text with css `vertical-align:middle` - it will shift up a bit, if a second row is added. (Ensure you have no linebreaks at the end causing a second row everytime) (You may need to add `display:table-cell;` also) – dognose Nov 30 '12 at 12:21
  • Tried and the text stays stuck to the top of the div. From what I've heard vertical-align only works well in tables, not in divs – Catpixels Nov 30 '12 at 12:27

4 Answers4

2
.yourDivClass {
    display: table-cell;
    vertical-align: middle;    
}

That should align your content. Finally, eliminate extraneous CSS and your JavaScript function to keep your code as simple as possible.

Levi Botelho
  • 24,626
  • 5
  • 61
  • 96
  • My problem is the padding and not the height. I have to keep a total height of 40px at all times. The problem is aligning the text vertically within the div – Catpixels Nov 30 '12 at 12:17
  • I will take another look. You might want to amend your question because I didn't know that the issue was with vertical centering of content. – Levi Botelho Nov 30 '12 at 12:19
  • I didn't noticed my issue was with that either until later. My bad, but I already added a note – Catpixels Nov 30 '12 at 12:23
  • I don't understand why, but the vertical align solution simply doesn't work. And yes, I eliminated the necessary lines – Catpixels Nov 30 '12 at 12:39
  • This solution doesn't work, or vertical align *without* the table-cell doesn't work? If this solution doesn't work try wrapping the `div` in a second `div`. Apply `display: table;` to the outer div and the CSS provided in this answer to the inner one which contains the text. Make sure that you do not explicitly define a height for the inner div! If you want it to be 40px high then you need to make the outer div that high. – Levi Botelho Nov 30 '12 at 12:41
  • Tried it in several ways. Adding the vertical-align with or without the table-cell, wrapping it with the div and adding the display:table there, keeping the other 2 in the inner div and then placing them on the outer one. I also tried placing the height on the outer div. Nothing worked – Catpixels Nov 30 '12 at 12:58
  • My honest guess is that either other CSS that you have written or other HTML that you have written is interfering here. If you try either of the methods (with or without a containing block) here in a fiddle you'll see that they work. Try them fiddle and if they *don't* work save the fiddle and send it to me--I'll debug it for you :) – Levi Botelho Nov 30 '12 at 13:02
  • Most likely, but sadly I can't take up on that offer. I'm developing this for my job, so I don't have the permission to share it in full. But thank you anyway – Catpixels Nov 30 '12 at 13:05
  • Don't post your personal code. Do a couple test `div`s and apply what I have suggested to you. If it doesn't work then you are applying it incorrectly. If it does then the problem is a CSS or HTML conflict. – Levi Botelho Nov 30 '12 at 13:07
  • Yeah, it's really a conflict in the code somewhere. I tried in a new file and it worked perfectly – Catpixels Nov 30 '12 at 15:23
0

To have a fixed height div with vertically centered text, remove the padding from your div, and use:

style="vertical-align:middle; display:table-cell;"

This will center the text vertically. No JavaScript will be needed any more.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • This does usually not apply for div's. You need to combine it with `display:table-cell;` . See also: http://phrogz.net/css/vertical-align/index.html – dognose Nov 30 '12 at 12:27
  • Just tried it (and vertical-align:central as well) and the text stays stuck to the top of the div. With the display:table-cell included – Catpixels Nov 30 '12 at 12:28
0

No need for JS. remove padding-top, set height and use vertical-align:middle; and display:table-cell; here is a working fiddle

Matanya
  • 6,233
  • 9
  • 47
  • 80
0

but with aligning the text vertically within it

If you want to vertically center align text inside a <div> of a specific height, set the CSS property line-height to the same value as the height property of the <div> (cross-browser).

Anders Sjögren
  • 146
  • 1
  • 6