How to add border to a text only and align center

Question

I am new to Html & CSS. I want a heading which contains text like "Women safty". I want to warp the heading text with border. But when I apply border to text the border covers all the area in the width both left and right.I just want to add border around text only and the text needs to be in center. enter image description here

Would you mind sharing your html? – shim-kun Jul 09 '20 at 16:51 — shim-kun, Jul 09 '20 at 16:51

Dennis Kozevnikoff · Answer 1 · 2020-07-09T16:52:13.867

1

Here is your text in HTML:

 <p>Women Safety</p>

In your CSS create your border with this command:

p.solid {border-style: solid; display:inline}

edited Jul 09 '20 at 16:52

answered Jul 09 '20 at 16:45

Dennis Kozevnikoff

2,078
3
19
29

If I use this line the whole html page is covered with border .i.e to the left and right. But I only want the border around the text – NaVeEd IbRaHiM Jul 09 '20 at 16:50
I edited my answer. Use display: inline to have just around the text. Let me know if it works. – Dennis Kozevnikoff Jul 09 '20 at 16:52

score 1 · Answer 2 · answered Jul 09 '20 at 17:02

1

<p style="text-align: center;">
    <span style="border: 1px solid red;display: inline-block;">Women safty</span>
</p>

answered Jul 09 '20 at 17:02

Harutyun Harutyunyan

94
5

score 1 · Accepted Answer · answered Jul 09 '20 at 17:11

1

Using a span

HTML

<span>Women safty</span>

CSS

body {
    text-align: center;
}
span {
    border: solid;
}

Result

Using a div, h1 and p

HTML

<h1>Women safty</h1><br /><br />
<div>Women safty</div><br /><br />
<p>Women safty</p><br /><br />

CSS

body {
    text-align: center;
}
h1 {
    border: solid;
    display: inline;
}
div {
    border: solid;
    display: inline;
}
p {
    border: solid;
    display: inline;
}

Result

answered Jul 09 '20 at 17:11

cerebrus6

86
8

1

Tnx bro it worked. Both the method worked. Can I able to use
tag after span tag .Tnx a lot @cerebrus6
– NaVeEd IbRaHiM Jul 09 '20 at 18:09
Yes you can. Also, a thing to take note. Even if span, div, p and h1 have almost the same effect in word wrapping the text, if you want to adjust the width manually, you cannot do it if you use span. But if you use div, p and h1, you can adjust them easily using width and height in css. Have a wonderful programming journey @NaVeEdIbRaHiM. – cerebrus6 Jul 10 '20 at 07:03

score 0 · Answer 4 · answered Jul 09 '20 at 16:57

0

Try This.

#test {
  border: solid; padding: 0.5%; display: inline;
}

<p id="test">Women Safety</p>

answered Jul 09 '20 at 16:57

ahsan

1,409
8
11

How to add border to a text only and align center

4 Answers4

tag after span tag .Tnx a lot @cerebrus6