how to use
in mid line in html?

Question

I have seen lots of tutorials but not found solution anywhere. I am using hr tag in html to show lines on top and bottom, its working proper. But when i try to use hr tag to show line in center, its not working. I want to show line in center and also want to show some text there. As i am new if some help me with some code its easy to learn.

I want to show something like this-

------------------------Hello--------------------------

But i want the line above in solid form.

Sriraman · Answer 1 · 2014-01-11T05:05:47.187

2

Try this

UPDATED FIDDLE

HTML

<div>
   <div><hr></div>
   <span> Hello  </span>
   <div><hr></div>
</div>

CSS

div {
  width:300px;
  text-align:center;
  display:table;
}
div > div {
   display:table-cell;
   vertical-align:middle;
}
div > span {
   white-space:nowrap;
}

edited Jan 11 '14 at 05:05

answered Jan 11 '14 at 04:59

Sriraman

6,542
4
36
58

1

- 1 you have line on only one side – I am Cavic Jan 11 '14 at 05:00
Sorry. Now, I fixed the problem. Now try the updated fiddle. – Sriraman Jan 11 '14 at 05:06
+1 :) for fixing the mistake – I am Cavic Jan 11 '14 at 05:07
Thanks for showing me the mistake. The previous demo working correctly in chrome. But, not working in firefox. Thats why I can't notice the mistake. – Sriraman Jan 11 '14 at 05:10

score 1 · Answer 2 · answered Jan 11 '14 at 04:59

1

jsFiddle: http://jsfiddle.net/theStudent/56Q2F/2/

<div style="height: 1px; background-color: black; text-align: center">
  <span style="background-color: white; position: relative; top: -0.55em; padding: 5px;">
    HELLO WORLD
  </span>
</div>

answered Jan 11 '14 at 04:59

I am Cavic

1,095
1
10
22

score 1 · Answer 3 · answered Jan 11 '14 at 05:01

1

try this

http://jsfiddle.net/9Y2Z4/

<div>sometext</div>
<div class="line">test here</div>
<div>again some text</div>

CSS:

.line {
     height: 0.5em;
    text-align: center;

    border-bottom: 2px solid Red;
    margin-bottom: 0.5em;
}
.line:first-line {
    background-color: white;
}

answered Jan 11 '14 at 05:01

Sajad Karuthedath

13,262
3
28
49

I like this approach as well, +1 mine is just very straight forward. – I am Cavic Jan 11 '14 at 05:02

score 1 · Answer 4 · answered Jan 11 '14 at 05:12

HTML

  <div class="divline"> <span class="spans">
        HELLO WORLD
      </span>

    </div>

CSS

.divline {
    height: 1px;
    background-color: black;
    text-align: center;
}
.spans {
    background-color: white;
    position: relative;
    top: -0.55em;
    padding: 5px;
}

Working Fiddle

Check this too

Kunj · Answer 5 · 2014-01-11T05:09:51.467

0

Each <hr> element returns rule to the beginning of the line (carriage return). You can try this:

.line{
    width:100px;
    height:1px;
    background:#ff0000;
    float:left;
    margin-top: 10px;
}
.text{
    float:left;
}

HTML:

<div class="line"></div>
<div class="text">Hello</div>
<div class="line"></div>

edited Jan 11 '14 at 05:09

answered Jan 11 '14 at 05:03

Kunj

1,822
21
31

how to use in mid line in html?

5 Answers5

Working Fiddle

how to use
in mid line in html?