Question

[Solved] HTML span align center not working?

I have some HTML:

<div align="center" style="border:1px solid red">
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 style="border:1px solid red;align=center">
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 style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

Solution #1:

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" style="border:1px solid red;">
    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 style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
Respondent: David19801

Solution #2:

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

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
Respondent: Will

Solution #3:

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 www.jsfiddle.net

Respondent: Chris J

Solution #4:

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

For me it worked very well. try this also

Respondent: Jeff Camera

Solution #5:

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

<span style="border:1px solid red;text-align=center">

It should be:

<span style="border:1px solid red;text-align:center">
Respondent: AIMABLE

Solution #6:

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 style="text-align: center;"> your entered stuff </div>
Respondent: nhazean

Solution #7:

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

Respondent: mark stewart

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy