使中心對齊文本的邊框底部寬度爲

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