How can I put element in the middle of vertical align?

Question

I made DEMO with JSfiddle so please check.

This show a comment that slides from right side to very left.
It's shown just a little bit above than middle of vertical align.

How can I show it right in middle?
Please fix and update my JSfiddle

Javascript

function transition() {

        $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600).fadeOut(100);
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>Hello! This is a test</p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);

}

setInterval(transition, 2000);

CSS

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
}

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    float:left;
    position:absolute;
}

HTML

<div class="newsticker"> 
</div>

Any specific reason for keeping `.newsticker p{position:absolute;}`? — Nitesh, Aug 26 '13 at 09:59
possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — lmjohns3, Aug 26 '13 at 10:11
It does affect. It goes to the bottom and then animated back to top. - @HUSTEN. If you think it is not affecting, I suggest you to remove it and check. — Nitesh, Aug 26 '13 at 10:35

Hashem Qolami · Accepted Answer · 2013-08-26T11:21:34.107

First reset browsers default stylesheet like margin or padding by:

* {
    padding: 0;
    margin: 0;
}

Then add line-height: 100px; CSS declaration to the .newsticker element:

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px; /* --------  */
    line-height: 100px; /*  |  */
             /*   ^----------  */
}

JSFiddle Demo

Update

By using CSS, it is almost impossible to achieve this goal. I create a jQuery version, It calculates height of the dynamic paragraph and set top property to get it to the middle of its parent. In this case a little change is needed in CSS:

CSS:

div.newsticker {
    position: relative; /* Add relative position to the parent */
    overflow: hidden;   /* Hide the overflow */
}

.newsticker p {
    width: 100%;       /* Set the width of paragraph to '100%' or 'inherit' */
}

JavaScript/jQuery:

var newsticker = $('.newsticker'),
    maxHeight = newsticker.height();

function transition() {
    newsticker.find('p').animate({
        marginLeft : "400px",
        opacity : ".0"
    }, 600).fadeOut(100);

    newsticker.append(
        $('<p>').css({
            'margin-left' : '400px',
            'opacity'     : '0'
        // Put your text in .text() method:
        }).text('Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam suscipit nihil voluptatibus maxime sit quam delectus eaque officiis cumque accusamus velit nesciunt deserunt veniam molestias alias? Eaque iste quia non.')
    ).find('p').each(function() {
        if ($(this).css('top') == 'auto')
        $(this).css('top',
            (maxHeight - $(this).height()) / 2
        );
    });

    newsticker.find('p').animate({"marginLeft":"0px","opacity":"1"}, 600);
}
setInterval(transition, 2000);

Here is the JSFiddle Demo.

Look at this http://jsfiddle.net/azHVv/14/ if the text is kinda long, it messes up. — HUSTEN, Aug 26 '13 at 09:59
what if I don't wanna use `* {padding: 0;margin: 0;}` ? how can you change? because I want margin. If I take it off, now it won't be in the middle anymore:( — HUSTEN, Aug 26 '13 at 12:57
@HUSTEN Set `padding: 0; margin: 0` only to `.newsticker p` selector ;) I just applied that rule to every element as a demo — Hashem Qolami, Aug 26 '13 at 13:00

Nikolaj Zander · Answer 2 · 2013-08-26T12:17:38.327

UPDATE

new Fiddle: New JsFiddle

HTML:

<div class="newsticker"> 
    <div class="middle"><p><p></div>
</div>

JS:

    function transition() {

        $('.middle').animate({"right":"-100%","opacity":".0"}, 600, function() {
            $('.middle').first().remove();
        });

        var width = $('.newsticker').width();
        $('.newsticker').append("<div class='middle'><p style='width: " + width + "px;'>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p></div>");
        var height = $('.middle p').last().height() / 2;
        $('.middle p').css('top','-' + height + 'px');
        $('.middle').animate({"right":"0px","opacity":"1"}, 600);
    }

setInterval(transition, 2000);

CSS:

   div.newsticker{
        border:1px solid #666666;
        width:100%;
        height:100px;
        padding: 0px;
        margin: 0px;
         overflow: hidden;
    position: relative;
    }

.newsticker p{
    padding-left:10px;
    padding-right:10px;
    line-height: 1em; 
    padding: 0px; 
    margin: 0px;
    position: relative;
    display: block;
}

.middle {position: absolute; top: 50%; padding:0; margin:0; right: -100%; opacity: 0;}

ORIGINAL ANSWER

here is the working fiddle

JsFiddle

you needed 100px line-height on your p tag and you needed to reset padding and margin on your div and p

 div.newsticker{
        border:1px solid #666666;
        width:100%;
        height:100px;
        padding: 0px;
        margin: 0px;
 }

    .newsticker p{
        padding-left:10px;
        padding-right:10px;
        float:left;
        position:absolute;
        line-height: 100px; 
        padding: 0px; 
        margin: 0px;
    }

also made some improvements to your animation:

function transition() {

    $('.newsticker p').animate({"marginLeft":"400px","opacity":".0"}, 600, function() {
         $('.newsticker p').remove();
        $('.newsticker').append("<p style='margin-left:400px;opacity:0'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </p>");
        $('.newsticker p').animate({"marginLeft":"0px","opacity":"1"}, 600);
    });                 
} 
setInterval(transition, 2000);

you have to start with this:

<div class="newsticker"> 
        <p><p>
 </div>

But look at my update http://jsfiddle.net/eySHH/1 If the text is kinda long, it messes up. — HUSTEN, Aug 26 '13 at 09:58
http://jsfiddle.net/eySHH/5/ now? if not pls give me more info what is still wrong in your opinion — Nikolaj Zander, Aug 26 '13 at 10:24
Please size down the width of the window, and you'll notice it won't show whole text. In fact, it has to be 2 lines. — HUSTEN, Aug 26 '13 at 10:33

score 0 · Answer 3 · answered Aug 26 '13 at 10:08

I have updated the fiddle, you can see the result here

This is the css applied on parent and child respectively

//parent
position:relative;

//child
position:absolute/relative;
top:50%;
height:x;
margin-top:-x/2; // half the height

There are two ways to vertically center align a block.

Take top position to 50%, and negative margin to half the height of block. This will force it to align vertically center. This is useful only when you know the size of the block.
Use the display technique. Apply 'display:table-cell' to the parent container and for the child container use 'vertical-align:middle' property. This will align your block vertically whatever the size may change to.

Please see this. this won't be in right in middle anymore if text gets long. http://jsfiddle.net/azHVv/21/ — HUSTEN, Aug 26 '13 at 10:20
If your text is dynamic please follow the second approach. Or use JavaScript to dynamically update the margin-top property of the block to half of it's display height. — Shiva Avula, Aug 26 '13 at 12:43

How can I put element in the middle of vertical align?

3 Answers3

Update

UPDATE

ORIGINAL ANSWER