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

One way of achiveing this is to place spans around the words on the left and right side of the hyphen. Then you can add a min-width to these to make them equal width which will put the hyphen in the center.

Fiddle

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;


}
.progress-ww span {
    display:inline-block;
    width:100px;
    text-align:left;
}
.progress-ww span:first-of-type {
    text-align:right
}

    

        

            
lopen - ik loop
            
klimmen - ik klim
            
geven - ik geef
            
schreeuwen - ik schreeuw
            
blozen - ik bloos
        
    

---

UPDATED VERSION USING FLEX

Below is an updated version for this solution using flex. This solution means you don't have to set any fixed witdths on the spans.

.progress-ww div {
  display: flex;
}

.progress-ww div span {
  flex: 1;
}

.progress-ww div span:first-of-type {
  text-align: right;
  padding-right: 5px;
}

.progress-ww div span:last-of-type {
  padding-left: 5px;
}

  

    
lopen - ik loop
    
klimmen - ik klim
    
geven - ik geef
    
schreeuwen - ik schreeuw
    
blozen - ik bloos