CODEWITHSUNDEEP
htmlcss
d3bug3r
d3bug3r

Reputation: 2586

Centering text using CSS

Hi i have following css which give me the following results:

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

my current html snippet as follow

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

Following are the screenshots:

enter image description here

But the result i expecting are like this:

enter image description here

It seems the 1 UNDI words is not align centre properly and also the border is not fully cross the box, how can i fix this issues? Thanks

Upvotes: 0

Views: 109

Answers (4)

alireza
alireza

Reputation: 507

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

Upvotes: 0

cbeckner
cbeckner

Reputation: 1818

Here is a working example that matches the example screenshot you posted above: http://jsfiddle.net/6DnPX/

I changed the HTML slightly to split things into divs. To achieve the formatting that you are after, it is typically easier to put extra containers in place for more fine grained control.

<div class="amount">
    <div class="left"><span>1</span> UNDI</div>
    <div class="right">RM0.50</div>
</div>

Accordingly, I altered the CSS to add the border around the interior as well as the divider. You'll likely need to adjust the dimensions slightly as you appear to be using a different font, but hopefully this gets you closer to where you want to be.

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

Upvotes: 1

defau1t
defau1t

Reputation: 10619

Just change the color's values in the below code and you are done. I just used yellow, red and white for illustration.

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

Upvotes: 1

Bindiya Patoliya
Bindiya Patoliya

Reputation: 2764

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

and use

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

instead of text-align: left;

Upvotes: 0

Related Questions