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

试试这个并查看display:inline-block

中的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>

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

如何在html中以直线获取文本和行

3 个答案: