Aligning text on a specific character

Question

I have this list of words i want to align on the center, every list item consists of two words divided by a \'-\'(hyphen). Is there an easy way i can align spot on the hyphe

Answer 1

you could wrap your text in an inline-block boxe and set a width, reset text-align and give a negative margin to reduce virtually it's size to zero : http://jsfiddle.net/seLvC/2/

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;
}
.progress-ww span {
    display:inline-block;
    width:100px;/* give it a width */
    margin:0 -100px 0 0;/* 0 space needed on right side */
    text-align:left;
}
.progress-ww span:first-of-type {
    margin:0 0 0 -100px;/* 0 space needed on left side */
    text-align:right
}

This would deserved to be tagged within

list , as it's similar to a dictionnary. :)