css - 中央揃えのテキストの境界線と下のスパン幅を作る

Question

pテキストの下に、テキストの幅全体にわたる点線が必要です。また、p水平方向の中央に配置したいと考えています。

テキストが 1 行より長くなることはありませんが、その行の長さは異なります (完全に修正されていれば、これは簡単に解決できます)。

解決策がいまいちわかりません。私は次の構造を持っています：

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

私のCSSには、次のようなものがあります。

        .container      {
                    width: 650px;
                    height: 100px;
                    }

    .content    {
                    text-align: center;
                    text-transform: uppercase;
                    font-size: 26px;
                    color: #4D4D4D;
                    }

        p           {
                    border-bottom: #808080;
                    border-bottom-width: thin;
                    border-bottom-style: dotted;            
                    }

Answer 1

ここ: http://jsfiddle.net/DqFp7/

HTML

<div class="container">

    <div class="content">

        <p>This is the title</p>

    </div>

</div>

CSS

.container {
    width: 650px;
    height: 100px;
}

.content {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    color: #4D4D4D;
}

p {
    border-bottom: #808080;
    border-bottom-width: thin;
    border-bottom-style: dotted;  
    display:inline;    
}​