Menu
To center an inline element like a link or a span or an img, all you need is text-align: center . For multiple inline elements, the process is similar. It's possible by using text-align: center .
Note, however, that text-align:center doesn't always work. This grey aside block is not centre-aligned. This is because text-align:center only affects inline elements, and <aside> is not an inline element by default. It is a block-level element.
In order for the span to be in the middle, you need the div that surrounds it to, at the very least, have width & text-align properties. Additionally, with this markup, your code as is will cause the span to center, but you would have to add float:left to your btnPrevious id.
Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
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>
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>
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
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
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">
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With