절대적으로 배치 된 요소가 상대적 div 내에서 올바르게 정렬되지 않았습니다

Question

내 Cordova 기반 응용 프로그램에 영국 라이센스 플레이트의 그래픽 표현을 표시해야하는 div가 있습니다. 이 같이 나타납니다, - (코르도바 3.8 버전은 iOS에서 표시하는 방법)

그러나, 안드로이드, 코르도바를 4.1.1 버전

을 :

이보고 해야하는 방법입니다 대신 :

문제를 보여, 다음과 같은 코드 조각입니다. 어떤 도움이라도 대단히 감사 할 것입니다.

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