Is there a way to make the span go to the center of document

Question

Is there a way you can make the span tag move into the center using CSS?

I need to ask this question because whenever I put text-align in the span, it doesn't work.

span {
  text-align: center;
}

<span>
This is span.
</span>

replace your `` with a `
`. By default, span is an ***inline element*** but you want the behaviour of a ***block level element***, which `div` is by default. — Martin, Oct 28 '20 at 14:52
I want to use to span for personal reasons instead of a div. — Sur, Oct 28 '20 at 23:48
I think div is also a great option for other projects I am creating so I am going to use that in the future. — Sur, Oct 29 '20 at 13:11

score 4 · Answer 1 · answered Oct 28 '20 at 14:50

Yes, is that for a splash screen ?

flex

html {
  display: grid;
  min-height: 100vh;
}

body {
  margin: auto;
}

<span>
This is span.
</span>

grid

html {
  display: flex;
  min-height: 100vh;
}

body {
  margin: auto;
}

<span>
This is span.
</span>

and before flex there was :

table display:

html {
  display: table;
  height: 100%;
  width:100%;
}

body {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<span>
This is span.
</span>

and before display:table there was also :

inline-block and a pseudo:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  text-align: center;
}

body:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

<span>
This is span.
</span>

ppwater · Answer 2 · 2020-10-30T08:25:01.150

3

span tag is an inline element so you can set display: inline-block and width

span {
display: inline-block;
width: 100%;
text-align:center;
}

<span>
This is span.
</span>

or you can wrap it around with a block element:

div {
text-align:center;
}

<div>
<span>
This is span.
</span>
</div>

or use flexbox

span {
  display: flex;
  justify-content: center;
}

<span>
this is a span
</span>

and see inline_elemets

edited Oct 30 '20 at 08:25

answered Oct 28 '20 at 14:49

ppwater

2,315
4
15
29

1

This also helps too and I think I can use all three options for various reasons. – Sur Oct 29 '20 at 13:13
@sur yes, I think so too. you can use inline-block when you need `span` tag to be inline but set width or something. and you can use flex when you need to align things easily. and you can wrap it around with a block element when you need other things to be aligned too. – ppwater Oct 29 '20 at 13:29

score 2 · Answer 3 · answered Oct 28 '20 at 14:50

2

span is an inline tag. If you want it to be centered, it needs to be in a block element.

e.g.

<p><span>This is span</span></p>

CSS

p { text-align:center;}

answered Oct 28 '20 at 14:50

Sivak

148
1
12

score 2 · Answer 4 · edited Oct 29 '20 at 13:50

2

The span is an inline element. This means that when it contains a text it takes the text width, not full width. You can put it in a div parent and give the div text-align: center and you can give it display:inline-block and set the width to 100%.

edited Oct 29 '20 at 13:50

Josef Engelfrost

2,955
1
29
38

answered Oct 28 '20 at 14:52

Kareem Sultan

180
10

score 2 · Answer 5 · answered Oct 28 '20 at 14:54

2

try using a div

<body>
<style>
    #stackoverflow{
        text-align: center;
    }
</style>
<div id="stackoverflow">
    <span>
        Test
    </span>
</div>

answered Oct 28 '20 at 14:54

Steven beltman

21
2

score 2 · Accepted Answer · answered Oct 28 '20 at 15:08

2

Just add display block:

span {
    text-align:center;
    display:block;
}

answered Oct 28 '20 at 15:08

Beata

56
2

score 1 · Answer 7 · answered Oct 28 '20 at 14:49

If you want to center your span in the whole screen, use CSS Flexbox to do this, wrap your span in a div:

<div>
  <p><span>This is span.</span></p>
</div>

Apply this CSS

div {
  display: flex;
  align-items: center;
  justify-content: center;
}

Use span in a <p> not seprately.

Is there a way to make the span go to the center of document

7 Answers7