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

No, there is no easy way to align to a specific character, and in fact no way with the given HTML markup.

The markup is best changed to a table, because that’s by far the most reliable way of achieving the desired appearance (even when CSS is off). It’s also the most logical approach, since the data is structurally a table of correspondences. Using dl would not be wrong if we adopt the HTML5 principle of dl as description list (not as definition list, as originally defined). But it offers no special benefits and causes some complications.

Example:

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

You can then easily style the table as desired. I’m not sure what kind of centering is desired, but you can center the table as a whole (e.g., in CSS with table {margin: 0 auto}), or you can right-align the first column (td:first-child { text-align: right }).

The markup would be even more logical without the hyphens in the content. You could omit them and generate them in CSS with the :before pseudo-element, if this suits you better.

(I would not use a hyphen “-” here; human languages don’t normally use hyphens that way. I would use an en dash “–” or maybe a colon “:”, which is often used to separate word forms in a paradigm.)