how to set the text between the line in html

Question

0.00/5 (No votes)

See more:

Hi Everyone,

i want to set the text between the line.
it should looks like as follows in center

--------- Lets begin ----------

line should be plane not dotted.
i wrote the code as follows:

XML

<table width="600"  cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="" style="margin-top:1%">
<tr>
<td align="left">
<div style="height:2px; background-color: #8000FF; text-align: center">
  <span style=" margin-right:-5%; margin-left:-5%; position: relative; top: -0.5em; color:blue; font-weight:bold;"><br>
   <p3> &nbsp; Lets begin &nbsp;</p3><br>
  </span>
</div>
</td>
</tr>
</table>

Posted 26-Oct-15 2:09am

R Harshal

Add a Solution

5 solutions

Solution 1

It is not clear why do you use br (line break) tags and what p3 tag is...but...

HTML

<div style="height:2px; background-color: #8000FF; text-align: center;">
    <span style="position: relative; top: -0.5em; background-color: white; padding: 5px;">Lets begin</span>
</div>

Posted 26-Oct-15 2:29am

Kornfeld Eliyahu Peter

Solution 3

Here's the tools you'll need:

HTML

<hr> to draw solid lines wherever you wish
style='position=relative; or, possibly even 'absolute;'
top and left styles to position your text
<div> to surround things so they can be positioned

You can see how these items are used here:
http://www.w3schools.com/html/default.asp[^]

Learning to position this yourself (with associated trial an error) is worth it for you.

Posted 26-Oct-15 2:34am

W∴ Balboos, GHB

Solution 5

Just yesterday I gave this solution with the working fine demo.
Did you look into it ?

HTML

<p class="lw">Let's Begin</p>

CSS

.lw { font-size: 60px; }

.lw span{
  color: #f44;
}

.lw:before{
  display: inline-block;
  content: ' ';
  height: 2px;
  width: 100px;
  background-color: #f44;
  margin-bottom: 20px;
}

.lw:after{
  display: inline-block;
  content: ' ';
  height: 2px;
  width: 100px;
  background-color: #000;
  margin-bottom: 20px;
}

See my answer here:
HTML HR LINE related issue.[^]
This is exactly what you want :)

-KR

Posted 26-Oct-15 7:18am

Krunal Rohit

Updated 26-Oct-15 7:20am

v3

Solution 2

Try-

HTML

<p style="width:100%;text-align:center;">Lets begin</p>

Note:- It is best to use CSS selector instead of inline styles.

Hope, it helps :)

Posted 26-Oct-15 2:31am

Suvendu Shekhar Giri

Updated 28-Oct-15 21:23pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2015-10-26T05:11:00

For example, this way:

HTML

<html>
    <head>
        <title>Solid line</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <style>
        center. { text-align:center; }
    </style>
<body>

<p class="center">────────── Letʼs begin ──────────</p>

</body>
</html>

:-)

Pay attention for the meta tag, it's essential. Your spelling is fixed. :-)
I don't want to discuss your design style, but want to note: many will find it questionable.

—SA

how to set the text between the line in html

5 solutions

Solution 1

Solution 3

Solution 5

Solution 2

Solution 4

Add your solution here

Preview 0

Existing Members

...or Join us