Vertically align ticker text without position absolute and CSS3 transform?

Question

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

possible duplicate of [Vertically align an image inside a div with responsive height](http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height) — cimmanon, Mar 03 '14 at 19:58

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

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

Here is the question

edited May 23 '17 at 11:57

Community

1
1

answered Mar 03 '14 at 19:53

Lokesh Suthar

3,201
1
16
28

Thank you. I used the line height. It wasn't working before because I was setting it to the text size, not the container height. – Cris Mar 03 '14 at 20:02

Vertically align ticker text without position absolute and CSS3 transform?

1 Answers1