Setting CSS Top value using jquery not working

Question

I have a DIV where I want the text to center vertically within that div. I can't use fixed pixel heights, only percentages.

<div style="position:relative; width: 100%; height: 100%;">

   <img src="images/thumb-member-placeholder.gif" alt=""  class="myImage"  /> 

    <div class="myText" style="display: inline-block; position: absolute; z-index:500; text-align:center;">Image Text</div>

</div>

I have 100 of these divs, where "myText" can be 1 line or 3 lines.

So I am using jquery to detect the height and set the TOP value accordingly:

        $(window).load(function() {


          var imageHeight = $('.myImage').height();


          $('.myText').each(function() {

            var textHeight =  $('.myText').height();


            var vertAdj = ((imageHeight - textHeight) / 2);
            $(this).css('top', vertAdj);

          });

        });

But it is not working. It outputs the same TOP value all the time, and does not detect the height of "myText" when the text goes to 2 or 3 lines.

Any suggestions?

var textHeight = $('.myText').height(); get the value of the first element in the stack, hence why it is all the same. — Karl-André Gagnon
– Karl-André Gagnon, Commented Feb 18, 2014 at 21:57
My suggestion avoid Jquery you can center vertically just with CSS . — DaniP
– DaniP, Commented Feb 18, 2014 at 21:57
Thanks Karl! How would I then modify my javascript so it would loop through the divs, and set the TOP value individually to each div? — user3019107
– user3019107, Commented Feb 18, 2014 at 22:02

xpy · Accepted Answer · 2014-02-18 22:20:09Z

2

Try this:

$('.myText').each(function(index,element) {

            var textHeight =  $(element).height();


            var vertAdj = ((imageHeight - textHeight) / 2);
            $(element).css('top', vertAdj);

          });

see the .each documentation for more http://api.jquery.com/each/

answered Feb 18, 2014 at 22:20

xpy

5,6713 gold badges32 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting CSS Top value using jquery not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related