Absolut positioniertes Element nicht richtig ausgerichtet innerhalb relativer div

Question

In meiner Cordova-basierten App habe ich ein div, das eine grafische Darstellung eines britischen Nummernschildes zeigen soll. Diese

ist, wie es soll aussehen:

(wie es zeigt auf iOS - Cordova ver 3.8)

jedoch auf Android, Cordova ver 4.1.1 scheint es, wie Sie stattdessen:

Das snippet ist wie folgt, um das Problem zu demonstrieren. Jede Hilfe würde sehr geschätzt werden.

.registration-plate-container { 
 
    text-align: center; 
 
} 
 

 
.registration-plate-ui { 
 
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%); 
 
    padding: .25em 1em .25em 1.75em; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 1px #ddd; 
 
    position: relative; 
 
    font-family: helvetica, ariel, sans-serif; 
 
} 
 

 
.registration-plate-ui:before { 
 
    content: 'GB'; 
 
    display: block; 
 
    width: 30px; 
 
    height: 100%; 
 
    background: #063298; 
 
    position: absolute; 
 
    top: 0; 
 
    border-radius: 5px 0 0 5px; 
 
    color: #f8d038; 
 
    font-size: .5em; 
 
    line-height: 85px; 
 
    padding-left: 5px; 
 
} 
 

 
.registration-plate-ui:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 30px; 
 
    border: 1px dashed #f8d038; 
 
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>

Answer 1

.registration-plate-container { 
 
    /* text-align: center; */ /* throws off position property centering */ 
 
    position: relative;  /* this is the actual container element, 
 
           so set the boundaries here for abspos children */ 
 
    height: 75px;   /* for demo only */ 
 
    border: 1px dashed red; /* for demo only */ 
 
} 
 

 
.registration-plate-ui { 
 
    background: linear-gradient(to bottom, #f8d038 0%, #f5ca2e 100%); 
 
    padding: .25em 1em .25em 1.75em; 
 
    font-weight: bold; 
 
    font-size: 2em; 
 
    border-radius: 5px; 
 
    border: 1px solid #000; 
 
    box-shadow: 1px 1px 1px #ddd; 
 
    position: absolute;   /* changed from 'relative` */ 
 
    left: 50%;     /* center horizontally */ 
 
    transform: translateX(-50%); /* center fine-tuning */ 
 
    font-family: helvetica, ariel, sans-serif; 
 
} 
 

 
.registration-plate-ui:before { 
 
    content: 'GB'; 
 
    display: block; 
 
    width: 30px; 
 
    height: 100%; 
 
    background: #063298; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0;    /* tell it where to go */ 
 
    border-radius: 5px 0 0 5px; 
 
    color: #f8d038; 
 
    font-size: .5em; 
 
    line-height: 85px; 
 
    padding-left: 5px; 
 
} 
 

 
.registration-plate-ui:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 7px; 
 
    left: 5px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 30px; 
 
    border: 1px dashed #f8d038; 
 
}

<div class='registration-plate-container'><span class='registration-plate-ui'>AB12 CDE</span></div>