CSS分隔符/文本定位

我在這裏有一個CSS分隔符的困境。請看：http://jsfiddle.net/fVxC6/1/CSS分隔符/文本定位

.div-line { 
    border-bottom: 1px solid #f0f0f0; 
    border-top: 1px solid #f0f0f0; 
    width: 100%; 
    float: left; 
    height: 1px; 
    display: inline-block; 
    margin: -14px 0 25px 0; 
}

什麼，我想實現的是在中間的文字，說的填充，爲5px適用於它。

我試着居中文本和應用邊界的權利和邊界左，但沒有工作（這不會是實際所需的結果如演示顯示，我有2線，其實是邊界頂部和底部邊界屬性）。

我幾乎可以肯定，必須有比應用邊框頂部&底部，並且不使用圖像，但我無法找到一個更好的解決方案..

UPDATE：這是有點接近了我所要達到但不完全，可能我還不夠清楚。我希望文本位於中心位置 - 代碼實現了什麼，但我也希望它能夠「推」這些邊界，例如左側5像素，右側5像素，因此它們之間會產生間隙實際居中的文本是定位

來源

2013-07-04 George

什麼是你真正想實現，兩行之間的文本？ –

從這篇文章中獲取一些靈感：http://css-tricks.com/line-on-sides-headers/ – CBroe

@Geroge不要重新編輯標題。這樣更清楚。 SO充當wiki，你的問題應該是規範的，適合其他人使用。 – raam86

我採取了不同的路線，然後你因爲你我的推理，你必須看所有的元素作爲文本，因此顯示他們內聯。

.div { 
    width:960px; 
    text-align:center; 
} 

.divider { 
    font-size: 16px; 
    font-weight: 400; 
    background-color: #fff; 
    padding-right: 10px; 
     display: inline-block; 
    width:10%; 
    padding: 0 3px; 
    vertical-align: middle; 
} 

.div-line { 
    border-bottom: 1px solid #f0f0f0; 
    border-top: 1px solid #f0f0f0; 
    width: 40%; 
    height: 1px; 
    display: inline-block; 
    vertical-align: middle; 
}

這裏有一個fiddle

來源

2013-07-04 09:57:17 raam86

這是有點接近我試圖實現，但不完全，可能我不夠清楚。我希望文本位於中心位置 - 代碼實現了什麼，但我也希望它能夠「推」這些邊界，例如左側5像素，右側5像素，因此它們之間會產生間隙實際居中文本被定位。 – George

下面是一個模型表示，只是要清楚：http://i.imgur.com/SwkLFlJ.png – George

請用這個信息更新您的原始問題 – algiecas

CSS分隔符/文本定位

回答

相關問題