How to make some text between two lines?

Question

Hi I have some text and a line.

I need to make the picture look like this:

In my HTML code it looks like this:

<div class="container"> <div class="line"></div> <h2>Some Text!!!</h2> <div class="line"></div> </div>

css:

.container { text-align: center; } .line { height: 5px; background: #FFEE90; }

What should I write to place my text between the lines?

I've seen this has been asked at least 2 times in here (since March 2014, not sure about the time before). — King King
– King King, Commented Apr 20, 2014 at 9:13

evanzto · Accepted Answer · 2014-04-20 09:15:30Z

You could achieve this with several ways.

You could add content line with before and after pseudo elements

p:before { content: "_____"; color: blue; position: absolute; top: -5px; left: -45px; } p:after { content: "_____"; color: blue; position: absolute; top: -5px; right: -45px; }

An example : http://jsfiddle.net/82EvC/

Another way could be with border lines

p:before { content: ""; border: 1px solid blue; position: absolute; width: 50%; top: 8px; left: -45px; } p:after { content: ""; border: 1px solid blue; width: 50%; position: absolute; top: 8px; right: -45px; }

an example: http://jsfiddle.net/82EvC/1/

luke · Accepted Answer · 2014-04-20 09:19:57Z

2

Try this (using one line and relative position on h2 element):

jsfiddle.net/td8L8/

answered Apr 20, 2014 at 9:19

luke

3,6191 gold badge29 silver badges46 bronze badges

Comments

Jeyarathnem Jeyachanthuru · Accepted Answer · 2014-04-20 09:23:44Z

Try this. Full width line and some html.

DEMO

<div class="line"><span>Some text</span></div> .line { position: relative; text-align: center; } .line:after { content: ""; border-bottom: 1px solid #ccc; position: absolute; top: 50%; left: 0; right: 0; width: 100%; z-index: -1; } .line span { padding: 0 8px; background-color: white; position: relative; }

Joel · Accepted Answer · 2024-07-25 07:56:31Z

<!DOCTYPE html> <html> <head> <style> fieldset { margin: 0 auto; text-align:center; border-bottom:none; border-left:none; border-right:none; width: 80%; } legend { margin: 0 auto; background-color: #eeeeee; color: grey; padding: 5px 10px; text-align:center; width: 150px; } </style> </head> <body> <h1>The fieldset element</h1> <fieldset> <legend>Text</legend> </fieldset> </body> </html>

midnightelf18 · Accepted Answer · 2024-11-01 07:12:44Z

adaptive solution without extra tags and word wrap

.foo { text-align: center; /** width: 256px; margin: auto; **/ } .foo>span::before, .foo>span::after { content: ''; width: 100%; height: 1px; background: black; } .foo>span { display: flex; align-items: center; white-space: nowrap; } .foo>span::before { margin-right: .8em; } .foo>span::after { margin-left: .8em; }

<div class="foo"> <span>Some inline text</span> </div>

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Collectives™ on Stack Overflow

How to make some text between two lines?

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Related