Привет, у меня есть следующие css, которые дают мне следующие результаты:
.pop-up .amount {
position: relative;
height: 100%;
width: 195px;
background-color: #e6c515;
background-size: 10px;
padding-left: 18px;
padding-right: 3.5px;
font-size: 29px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
}
.pop-up .amount p {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding-right: 47px;
width: 31px;
line-height: 15px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 4px;
}
мой текущий html-фрагмент, как следует
<div class="amount">
<p>1 UNDI</p>RM0.50
</div>
Ниже приведены скриншоты:
Но результат, который я ожидаю, выглядит следующим образом:
Кажется, что 1 UNDI
не выравнивает центр должным образом, а также граница не полностью пересекает поле, как я могу исправить эти проблемы? благодаря
Вот рабочий пример, который соответствует приведенному выше скриншоту примера: http://jsfiddle.net/6DnPX/
Я немного изменил HTML, чтобы разделить вещи на div. Для достижения форматирования, которое вам требуется, обычно проще разместить дополнительные контейнеры для более тонкого контроля.
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
Соответственно, я изменил CSS, чтобы добавить границу вокруг интерьера, а также разделитель. Скорее всего, вам придется немного изменить размеры, поскольку вы, кажется, используете другой шрифт, но, надеюсь, это приблизит вас к тому, где вы хотите быть.
CSS:
.amount {
font-family: Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border: 5px solid #eee;
}
.amount .left {
float: left;
text-shadow: 1px 2px #A7A2A2;
padding: 10px 25px 10px 15px;
width: 31px;
line-height: 20px;
text-align: left;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
height: 100%;
margin-right: 5px;
text-align: center;
}
.amount .left span {
font-size: 30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding: 15px;
}
Просто измените значения цвета в приведенном ниже коде, и все готово. Я просто использовал желтый, красный и белый для иллюстрации.
HTML:
<body class="pop-up">
<div class="amount">
<p>1 <span>UNDI</span></p>
<span class="s">RM0.50</span></div>
</body>
CSS:
.amount{
background:yellow;
float:left;
border:5px solid #c0c0c0;
padding-right:40px;
1padding-top:20px;
line-height:60px;
font-size:30px;
padding-left:5px;
color:#fff
}
.amount p {
margin:0;
border-right:5px solid red;
float:left;
width:80px;
padding-left:10px;
line-height:40px;
font-size:18px;
height:60px;
}
.amount p span {
display:block;
margin-top:-8px;
line-height:8px;
}
.s{
text-align:center;
display:inline-block;
padding-left:15px;
}
demo: http://jsfiddle.net/parslook/6DnPX/1/
html:
<div class="amount">
<div class="left"><span>1</span> UNDI</div>
<div class="right">RM0.50</div>
</div>
css:
.amount {
font-family:Helvetica, Arial, sans-serif;
position: relative;
height: 100%;
width: 235px;
background-color: #e6c515;
background-size: 10px;
font-size: 39px;
line-height: 32px;
color: white;
float: left;
margin: 3px;
text-shadow: 1px 2px #A7A2A2;
border:5px solid #eee;
}
.amount .left{
float: left;
text-shadow: 1px 2px #A7A2A2;
padding:10px 10px;
line-height: 23px;
color: white;
font-size: 19px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
margin:0 auto;
text-align:center;
}
.amount .left span {
display:block;
font-size:30px;
}
.amount .right {
border: 2px solid #ACACAC;
padding:20px 95px;
text-shadow: 1px 2px #A7A2A2;
line-height: 23px;
color: white;
font-size: 30px;
vertical-align: middle;
border-right: 2px solid #ACACAC;
min-height: 100%;
height:100%
margin:0 auto;
text-align:center;
}
<div class="amount">
<p>1<br /> UNDI</p>RM0.50
</div>
и использовать
.pop-up .amount p{text-align: center;}
вместо text-align: left;