Geek Answers Handbook

"Text-align: center" does not work in span element

I didn’t do HTML and CSS for some time, so I can forget something, but for some reason the “style” tag with the set of text-align properties does not work even in the simplest context. I am going to show you the whole, whole file that I have, but my problem is only in the two comments that I have. Do not worry about other things; this is for a small passion project I'm working on.

So, here is the whole file. I have many things that are not relevant and not important; just focus on the code in two comments.

<!doctype html> <html> <head> <meta charset="utf-8"/> <title>JSON Generator</title> <link rel="stylesheet" href="web_mod.css"></link> </head> <body bgColor="#E3E3E3"> <!--Start here--> <span style="text-align: center">Coded by AnnualMelons</span><br> <!--Finish here--> <span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br> Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span> <script> </script> </body> </html>

The “Coded by AnnualMelons” part is supposed to be in the center, but it’s not. At least for me this is not so.

I know that the other part of the file does not matter, but I thought I could show you that this could be an external problem.

I'm sure I'm just making a stupid mistake, because I haven't done this for a while, but it doesn't work ... so yes. I use Firefox as my web browser if that helps.

Thanks!

+9
html text-align
source share
4 answers

The <span> element is a built-in "element by default. A value other than block-level elements ( <div> <h1> <p> , etc.), the Span takes up only as much horizontal space as its contents.

text-align: center Works, but you apply it to an element that does not have a width larger than its contents (like all elements of a block).

I recommend either changing the range to a <p> element or specifying the display: block property on your span.

Here JSfiddle demonstrates that <span> with display: block; text-align: center display: block; text-align: center and a <p> with text-align: center; achieve the same effect.

Hope this helps!

+26
source share

Use p or div, not span. Text is an inline element as well as a range. For text-alignment to work, it must be used on a block-level element (p, div, etc.) to center inline content.

Example:

 <div style="text-align: center">Coded by AnnualMelons</div><br>
+3
source share

Use it in style.

 margin-left: 50%;

example-

  <span style="margin-left: 45%;">Centered Text</span>
0
source share
 .span { text-align: center; width: -webkit-fill-available; }

This worked for me, and the text inside my span tag is now centered.

0
source share

More articles:


All Articles