HTML span align center not working?

I have some HTML:

<div align="center"> This is some text in a div element! </div> 

The Div is changing the spacing on my document, so I want to use a span for this instead.

But span is not centralizing the contents:

<span> This is some text in a div element! </span> 

How do I fix this?

EDIT:

My complete code:

<html> <body> <p>This is a paragraph. This text has no alignment specified.</p> <span> This is some text in a div element! </span> </body> </html> 
4

7 Answers

A div is a block element, and will span the width of the container unless a width is set. A span is an inline element, and will have the width of the text inside it. Currently, you are trying to set align as a CSS property. Align is an attribute.

<span align="center"> This is some text in a div element! </span> 

However, the align attribute is deprecated. You should use the CSS text-align property on the container.

<div> <span> This is some text in a div element! </span> </div> 
1

Please use the following style. margin:auto normally used to center align the content. display:table is needed for span element

<span> This is some text in a div element! </span> 

The align attribute is deprecated. Use CSS text-align instead. Also, the span will not center the text unless you use display:block or display:inline-block and set a value for the width, but then it will behave the same as a div (block element).

Can you post an example of your layout? Use

4
span.login-text { font-size: 22px; display:table; margin-left: auto; margin-right: auto; } <span>Welcome To .....CMP</span> 

For me it worked very well. try this also

On top of all the other explanations, I believe you're using equal "=" sign, instead of colon ":":

<span> 

It should be:

<span> 

Span is inline-block and adjusts to inline text size, with a tenacity that blocks most efforts to style out of inline context. To simplify layout style (limit conflicts), add div to 'p' tag with line break.

<p> some default stuff <br> <div> your entered stuff </div> 

Just use word-wrap:break-word; in the css. It works.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

You Might Also Like