Align profile fields using css

I have a page with the following format,

My Profile<br />
Name <span class='values'>: $name</span><br />
 Age <span class='values'>: $age</span><br />

etc...

I want to 开发者_StackOverflowalign the fields such that colon is centered followed by the values retrieved from db.

I used a span class with the following info but still the colon is not in the same line.

.values {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
padding-left:100px;
}

Thanks.

You'll have to enclose labels (name, age) in an inline-block element with fixed width and align text in them to right. Example.

I'd wrap all the labels in one div, then wrap all your values in another div, float those divs side-by-side, then text-align: right on the first div with your labels.