Центрировать текст вдоль символа

Question

Как в этом случае центрировать текст вдоль символа ':':

      fubi : lalala
Blockquote : pepppepp
       asd : qwerty

Моя единственная идея - создать 3 разных элемента в строке с разными выражениями "left / center / right", где центр имеет абсолютную позицию, а элементы left и right выровнены вправо и влево соответственно.

Answer 1

Это может быть достигнуто с помощью небольшой дополнительной разметки и стиля.

<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;
}

Пожалуйста, посмотрите этот JSFiddle для демонстрации.