Question

How do I center text along a character in this case ‘:’:

      fubi : lalala
Blockquote : pepppepp
       asd : qwerty

my only idea es tu create 3 different elements per line with different clases “left/center/right” with center having an absolute position and the element left and right are aligned right and left respectively.

Answer 1

This can be accomplished with a little extra markup and styling.

<label>fubi :</label><span>lalala</span><br />
<label>Blockquote :</label><span>pepppepp</span><br />
<label>asd :</label><span>qwerty</span><br />

CSS:

label {
    display: block;
    float: left;
    width: 100px;
    text-align: right;
}
span {
    margin-left: 5px;
}
br {
    clear: both;
}

Please see this JSFiddle for a demo.