How can I place an element in the middle of a vertical alignment?

Question

I did a DEMO with JSfiddle, so please check.

This shows a comment that slides from the right to the left.
It is shown just above the middle of the vertical alignment.

How can I show it right in the middle?
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> 

Answer 1

First reset the default browsers, for example margin or padding :

 * { padding: 0; margin: 0; } 

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

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

JSFiddle Demo

Update

Using CSS is almost impossible to achieve. I am creating a jQuery version, it calculates the height dynamic paragraph and sets the top property to get it to the middle of its parent. In this case, you need to slightly modify the 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 .

Answer 2

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 RESPONSE

here is a working violin

Jsfiddle

you needed 100px line-height on your p tag, and you needed to reset the padding and margins 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 should start with this:

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

Answer 3

I updated the fiddle, you can see the result here

This is css applied to 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 a block.

• Take the upper position to 50%, and the negative to half the block height. This will make it center to center. This is only useful when you know the size of the block.
• Use a display technique. Apply "display: table-cell" to the parent container, and for the child container, use the "vertical-align: middle" property. This will align your block vertically regardless of the size that may change.