Search code examples
androidhtmlcsswebkitalignment

How to bottom center a span inside a list item

I think this is already discussed somewhere but I couldn't find it :(

So as the title questions it; how to bring the span, inside the li, to be centred, and bottom aligned with a cross browser css rules (target is Webkit browser inside Android device)?

DEMO at Plunker

Solution

  • Does this help?

    .page--game-core_bottom .tabs li {
    position: relative; /* Set as a reference point */
}

.page--game-core_bottom .tabs li span{
    /* margin-top: 10px; */
    position: absolute;
    bottom: 0;
    left: 0;       /* These three lines   */
    right: 0;      /* keeps the spans     */
    margin: auto;  /* center horizontally */
}

    JSFiddle Demo