Вопрос

Making a simple ticker, I have a solution that works to vertically align the bar of text, which is the following:

tickstream {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    box-sizing:border-box;
    background-color:rgb(64,224,208);
    font-size:61.8vh;
    font-family:"Gill Sans"
}
tickstream span {
    position:absolute;
    width:auto;
    height:auto;
    top:50%;
    -webkit-transform:translate(0,-50%);
    white-space:nowrap;
    text-overflow:clip;
}

See the fiddle here: http://jsfiddle.net/S6LwG/

How to do this without using -webkit-translate:transform ?

This seems overly verbose for just a simple vertical text align. I used to be able to vertically align single lines of text without using transform or Chuck Norris, and now I can't figure it out. (Note: This only needs to work in present Chrome).

Это было полезно?

Решение

Here is simple pen I created for a similar answer. I tried 3 different methods for vertical alignment.

Here is the question

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top