如何在html中直線獲取文本和線條

Question

如何獲得直線，文本和直線？

code。這是我的html的jsfiddle。我使用內聯屬性使它們顯示在一條直線上。但他們不會改變。

怎麼做，使它們看起來像

---------------------- About Me --------------------- 
(^^dotted line above should actually be single line.) 

Answer 1

使用此 -

#about_me1 hr, #about_me1 h3{ 
    display: inline-block; 
    vertical-align: middle; 
} 

這裏的更新Fiddle

Answer 2

試試這個，有style

<header id="about_me"> 
    <div id="about_me1"> 
    <hr size="5" align="left" color="black" style="display:inline-block;width:30%;"> 
    <h3 style="display:inline;">About Me</h3> 
    <hr id = "line" size="5" align="left" width="30%" color="black" style="display:inline-block;width:30%;"> 
    </div> 
</header> 

一看就 display:inline-block

Answer 3

僅使用一個元素，以顯示邊框，將在每一個分辨率和可重複使用的工作：

<header id="about_me"> 
    <div id="about_me1"> 
     <h3><span>About Me</span></h3> 

    </div> 
</header> 


#about_me1 { 
    border-top: 2px solid #FF0000; 
    position: relative; 
    margin-top:15px; 
} 
h3 { 
    position: absolute; 
    top: -18px; 
    text-align:center; 
    width:100%; 
    padding:0; 
    margin:0px; 
} 
h3 span { 
    background:#fff; 
    display: inline-block; 
    padding: 5px; 
} 

Demo