如何将元素放在垂直对齐的中间?

I made DEMO with JSfiddle so please check.

我用JSfiddle做了DEMO，请查收。

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

我怎么才能把它放在中间呢?请修复并更新我的JSfiddle

Javascript

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

CSS

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

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

HTML

HTML

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

3 个解决方案

#1

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:

然后添加行高:100 px;CSS声明到。newsticker元素:

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

JSFiddle Demo

JSFiddle演示

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，几乎不可能实现这个目标。我创建了一个jQuery版本，它计算动态段落的高度并设置top属性，使其位于父段落的中间。在这种情况下，CSS需要做一些改变:

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:

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.

这是JSFiddle演示程序。

#2

UPDATE

new Fiddle: New JsFiddle

新的小提琴:新的JsFiddle

HTML:

HTML:

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

JS:

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:

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

JsFiddle

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

你需要在你的p标签上设置100px的行高，你需要重置你的div和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>

#3

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

我已经更新了小提琴，你可以在这里看到结果

This is the css applied on parent and child respectively

这是分别应用于父级和子级的css

//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.

有两种方法可以垂直居中对齐一个块。

1. 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.
2. 取顶位50%，取负边半块高度。这将迫使它垂直对准中心。这只有在您知道块的大小时才有用。
3. 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.
4. 使用显示技术。将“display:table-cell”应用到父容器，对于子容器，使用“垂直对齐:中间”属性。无论大小如何变化，这将使您的块垂直对齐。