我怎样才能把元素放在垂直排列的中间

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

本文关键字：垂直 排列 中间 元素      更新时间：2023-09-26

我用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>

首先通过：重置浏览器默认样式表，如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演示。

更新

新Fiddle：新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;}

原始答案

这是工作小提琴

Js报价

你需要在你的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>

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

这是分别应用于父级和子级的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"属性。这将使您的块垂直对齐，无论大小可能更改为什么
相关文章：