0

When it shows comment, it won't show the comment in the middle of vertical-align.
How can I make it shown in the middle of vertical-align?

This is current output. I want it right in the middle of vertical-align.

enter image description here

Javascript

function showComments(time){
    var foundComments = findComments(time);
    $.each(foundComments,function(i,comment){
        $commentContainer.animate({"marginLeft":"400px","opacity":".0"}, 600);
        setComment(comment.message);
        $commentContainer.animate({"marginLeft":"0px","opacity":"1"}, 600);
    });
};

CSS

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

.newsticker p{
    height:100px;
    float:left;
    position:absolute;
}

HTML

    <div class="newsticker"> 
    </div>
HUSTEN
  • 5,117
  • 4
  • 24
  • 38

4 Answers4

1

If its a single line. set the line height to the height of the div.newsticker eg 100px.

For example font: 16px/100px 'arial', sans-serif

otherDewi
  • 1,098
  • 10
  • 24
1

Just update below CSS3 rule to use "table-cell" and "vertical-align" as below:

div.newsticker{
    border:1px solid #666666;
    width:100%;
    height:100px;
    display: table-cell;
    vertical-align: middle;
}

Also, you need to avoid position:absolute;

.newsticker p{
    height:100px;
    float:left;
    position:absolute;
}
Sunil Kumar
  • 1,718
  • 16
  • 33
  • Thanks. it looks right. But the problem is that I use animation. and your code makes it look different animation – HUSTEN Aug 26 '13 at 06:00
  • @HUSTEN - Can you please post your code via jsfiddle to help you with animation too? – Sunil Kumar Aug 26 '13 at 06:10
  • I made DEMO! Please check http://jsfiddle.net/azHVv/ It won't be shown on the middle of vertical align!! – HUSTEN Aug 26 '13 at 06:38
  • @HUSTEN - Please refer this post, and you can try using CSS based animations if you are ok for morden browser support only, [Sample Animation](http://stackoverflow.com/questions/11679567/using-css-for-fade-in-effect-on-page-load) – Sunil Kumar Aug 26 '13 at 06:48
  • @HUSTEN - You need to wrap everything inside a div to avoid that animation error. – Sunil Kumar Aug 26 '13 at 06:50
1

Try a div with display:table and then a div within with a display: table-cell where you want the text. That should vertical align, JS Fiddle is down, so I can't show you an example.

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

.newsticker p{
    padding-left:10px;
    padding-right:10px;   
    display: table-cell;
    vertical-align: middle;
}
Alex
  • 852
  • 1
  • 10
  • 21
  • Thanks. it looks right. But the problem is that I use animation. and your code makes it look different animation – HUSTEN Aug 26 '13 at 05:59
  • I made DEMO! Please check http://jsfiddle.net/azHVv/ It won't be shown on the middle of vertical align!! – HUSTEN Aug 26 '13 at 06:38
  • This is the move how I want it http://jsfiddle.net/azHVv/6/ I applied your code but now the move became just like this http://jsfiddle.net/azHVv/7/ see the difference? second one looks strange – HUSTEN Aug 26 '13 at 08:13
1
<div>
<span class="newsticker"> 
</span></div>



div {
border: 1px solid black;
}
span.newsticker {
border: 1px solid transparent;
}
.newsticker p {
margin: 50px;
vertical-align: middle;
}

http://jsfiddle.net/azHVv/22/

  • I made DEMO! Please check http://jsfiddle.net/azHVv/ It won't be shown on the middle of vertical align!! – HUSTEN Aug 26 '13 at 06:39