我用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>
答案 0 :(得分：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 Demo
通过使用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 Demo 。
答案 1 :(得分：1)
新小提琴：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;}
这是工作小提琴
你的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>
答案 2 :(得分：0)
我已更新小提琴，您可以看到结果here
这是分别适用于父母和子女的css
//parent
position:relative;
//child
position:absolute/relative;
top:50%;
height:x;
margin-top:-x/2; // half the height
垂直居中对齐一个块的方法有两种。