文本在一條線上

Question

我試圖把一個文本行的中心，你精讀看到圖像的中心：

Here the Image...

我是想，但它不」你看起來不錯。

我正在使用Bootstrap。

你有什麼想法嗎？

非常感謝！

Answer 1

毫無遮攔與背景顏色（即：白色）
但使用:after和:before個僞元素，而不是：

.line{ 
 
    overflow: hidden; 
 
    text-align: center; 
 
} 
 
.line span{ 
 
    position:relative; 
 
} 
 
.line>span:after, 
 
.line>span:before{ 
 
    position:absolute; 
 
    top:50%; 
 
    width:99em; 
 
    content:""; 
 
    height:1px; 
 
    background:#ddd; 
 
} 
 
.line>span:after { left: 110%; } 
 
.line>span:before{ right: 110%; }

Bla here 
 
<p class="line"><span>User name</span></p> 
 
and here

Answer 2

檢查：

.line{ 
 
    width:100%; 
 
    height:auto; 
 
    position:relative; 
 
    text-align:center; 
 
    background:white; /*It must have same color*/ 
 
} 
 
.line .color{ 
 
    z-index:0; 
 
    position:absolute; 
 
    top:17px; /*If your font size is bigger, increase this value*/ 
 
    height:1px; /*Want a bolder line? Increase this value*/ 
 
    width:100%; 
 
    background:gray; /*Want to change line color? Change it here*/ 
 
} 
 
.line .text{ 
 
    z-index:1; 
 
    position: relative; 
 
    display:inline-block; 
 
    padding:10px; 
 
    background:white; /*It must have same color*/ 
 
    font-size:10px; /*Change font size*/ 
 
}

<div class="line"> 
 
    <div class="color"> 
 
    </div> 
 
    <div class="text"> 
 
     oder 
 
    </div> 
 
</div>

或者嘗試here