CODEWITHSUNDEEP
htmlcss
nomorequestions
nomorequestions

Reputation: 589

How to get text and line in a straight line in html

How can I get a line, text and then a line in a straight line?

code. Here is the jsfiddle of my html. I use inline property to make them appear in a straight line. But they do not change.

How to do so that they appear like

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

Upvotes: 0

Views: 8000

Answers (3)

Richa
Richa

Reputation: 4270

Use only one element to show border, which will work in every resolution and reusable:

<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

Upvotes: 0

drkunibar
drkunibar

Reputation: 1337

Try this and have a look to display:inline-block in 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>

Upvotes: 0

Dipak
Dipak

Reputation: 12190

Use this - 

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

Here's updated Fiddle

Upvotes: 5

Related Questions