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


Tags: javascript,jquery,html,css

Problem :

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>


Solution :

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.


    CSS Howto..

    How to apply a class in the current slide using bxslider?

    CSS : How to have an input field auto adjusting its width

    How come I keep getting a Failed to load resource: Error everytime I run my applacation?

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    How to get crossing CSS borders

    How do I add a class to a default bootstrap class

    How do I add a mouseover drop shadow effect for circular images?

    How to absolutely position element against page rather than floated parent?

    Adding a description to a css image slideshow

    How to move one element to the right of another using CSS?

    How do I change the css so lowering one class does not lower the other?

    How to set background image for body tag using css?

    How to replace @media (max-width) using Stylish or Greasemonkey?

    How To Apply jQuery CSS Selector

    Displaying XML using CSS: How to handle  ?

    Basic concept for how javascript replaces an html input with something interactive?

    How to add a play icon to Image on CSS

    How do I get a bold version of a custom font?

    How to reference an embedded image from CSS?

    How to not inherit CSS styles from parents? [duplicate]

    How to add multiple css rules to minimize browser reflows?

    How to make a table scrollable with fixed header?

    CSS : How to make two column right fluid left fluid depend on right

    CSS- how to prevent the original title info to be displayed

    how to change height of div to covered the text area (CSS)

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How to add hover effect to menu using jQuery

    http://com.google how do they transform everything to RTL

    How to save css style after hover action

    Floating divs, different height, building from left to right. how to fill vertical gaps between levels?