使中心对齐文本的边框底部跨度宽度

Question

我希望我的p文本在它下面有一条横跨文本宽度的虚线,我也希望它p能够水平居中.

文本永远不会长于一行,但它在该行上的长度会有所不同(如果它完全固定,我可以很容易地解决这个问题).

我无法弄清楚解决方案.我有以下结构:

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