Центрирование текста с помощью CSS

Привет я есть следующие CSS, которые дают мне следующие результаты:Центрирование текста с помощью 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>

Ниже приведены скриншоты:

enter image description here

Но результат, который я ожидаю, выглядит следующим образом:

enter image description here

Кажется, 1 UNDI слова не выравнивание по центру правильно, а также граница не полностью пересечь поле, как я могу это исправить проблемы? Благодаря

источник

2013-09-19 d3bug3r

положить разрыв строки после '1' ... и набор' выравнивания текста: центр; 'для этого контейнера. –

где находится .pop-up класс в вашем html – defau1t

Вот рабочий пример, который соответствует пример экрана вы размещены выше: http://jsfiddle.net/6DnPX/

Я немного изменил HTML разделить вещи в divs. Для достижения форматирования, которое вам требуется, обычно проще разместить дополнительные контейнеры для более тонкого контроля.

<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; 
}

источник

2013-09-19 06:01:22 cbeckner

<div class="amount"> 
<p>1<br /> UNDI</p>RM0.50 
</div>

и использовать

.pop-up .amount p{text-align: center;}

вместо text-align: left;

источник

2013-09-19 05:45:41

Просто измените значения цветовой в коде ниже, и вы сделали. Я просто использовал желтый, красный и белый для иллюстрации.

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

источник

2013-09-19 06:06:46 defau1t

демо: 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; 
}

источник

2013-09-19 06:30:41 alireza

Центрирование текста с помощью CSS

ответ

Смежные вопросы