html - テキストを文字に沿って中央揃えにする

Question

この場合、文字に沿ってテキストを中央に配置するにはどうすればよいですか ':':

      fubi : lalala
Blockquote : pepppepp
       asd : qwerty

私の唯一のアイデアは、「左/中央/右」の異なるクラスを持つ行ごとに3つの異なる要素を作成し、中央には絶対位置があり、要素の左と右はそれぞれ右と左に配置されます。

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を参照してください。