在我的cordova应用程序中,我有一个div,它应该显示一个英国牌照的图形表示。
这就是它的样子:
(如何在iOS上显示-Cordova 3.8版)
然而,在Android系统Cordova 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>
最佳答案
.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>