4

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

这显示了一条从右侧滑到最左侧的评论。
它显示在比垂直对齐中间稍高的位置。

我怎样才能在中间显示它？
请修复并更新我的 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>
4

3 回答 3

2

首先重置浏览器默认样式表，如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);

这是JSFiddle 演示。

于 2013-08-26T09:55:46.197 回答
1

更新

新小提琴：新的 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;}

原始答案

这是工作小提琴

提琴手

您的 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;
    }

还对您的动画进行了一些改进：

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);

你必须从这个开始：

<div class="newsticker"> 
        <p><p>
 </div>
于 2013-08-26T09:56:33.313 回答
0

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

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

//parent
position:relative;

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

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

  1. 将顶部位置设为 50%，将负边距设为块高度的一半。这将迫使它垂直居中对齐。仅当您知道块的大小时，这才有用。
  2. 使用显示技术。将“display:table-cell”应用于父容器，子容器使用“vertical-align:middle”属性。这将使您的块垂直对齐，无论大小可能更改为。
于 2013-08-26T10:08:37.003 回答