html - 使用 CSS 居中文本

Question

您好，我有以下 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 字没有正确对齐中心，而且边框也没有完全穿过框，我该如何解决这个问题？谢谢

Answer 1

这是一个与您在上面发布的示例屏幕截图匹配的工作示例: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;   
}