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

debugcn 发表于 Dev

咳嗽

我用JSfiddle制作了DEMO，所以请检查。

这显示了一条从右侧滑动到最左侧的注释。
它显示的位置仅比垂直对齐的中间高一点。

如何在中间显示它？
请修复并更新我的JSfiddle

Java脚本

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>

哈希笔

首先重置浏览器的默认样式表，例如margin或padding按：

* {
    padding: 0;
    margin: 0;
}

然后将line-height: 100px;CSS声明添加到.newsticker元素：

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

JSFiddle演示

更新

通过使用CSS，几乎不可能达到这个目标。我创建一个jQuery版本，它计算height动态段落并设置top属性以使其到达其父级的中间。在这种情况下，需要对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);