0

Why text-align and width are not applying to an inline element. jsFiddle example. Can you get a prooflink to a CSS spec?

  • 1
    ..make it an `inline-block` element. http://jsfiddle.net/NhCa4/ – Josh Crozier Feb 01 '14 at 05:29
  • try adding `display: block;` – Matt Way Feb 01 '14 at 05:29
  • Is it true that CSS spec denies to apply width and text-align properties to an inline elements? –  Feb 01 '14 at 05:32
  • Yes because inline elements have no box properties like width, margin, padding. There's nothing for width to apply. – helion3 Feb 01 '14 at 05:33
  • Can't you solve it with a block element like div? Normally, you shouldn't override these, better use a div. See this question:http://stackoverflow.com/questions/1423294/setting-the-width-of-inline-elements?answertab=active#tab-top – toesslab Feb 01 '14 at 05:34
  • @JoshC Is there any better understanding for `display` property in css because often by different tries example: try `display: block` if not working change it to `inline-block` else.. it goes on. any SO question you have crossed explaining these properties? – Praveen Feb 01 '14 at 05:35
  • @BotskoNet Can you get a spec proof-link? –  Feb 01 '14 at 08:23

3 Answers3

2

HTML

<span>Some text</span>

CSS

span{
    width: 500px;
    text-align: center;
    border:1px solid black;
    display:block;
    
}

Working Fiddle

Output:

enter image description here

To know more about Display Property Click here

Updated:

This can be achieved by this but it is not recommended for the following reasons

Style sheets provide the means to specify the rendering of arbitrary elements, including whether an element is rendered as block or inline. In some cases, such as an inline style for list elements, this may be appropriate, but generally speaking, authors are discouraged from overriding the conventional interpretation of HTML elements in this way.

Source

Community
  • 1
  • 1
Amarnath Balasubramanian
  • 9,300
  • 8
  • 34
  • 62
0

Size and align dont work well with span if at all. Wrap it or use a div.

<style type="text/css">
div{text-align:center; width:100%;}
</style>

<div>
<span>Some text</span>
</div>
user3246423
  • 1
  • 1
  • 4
0

width

10.3.1 Inline, non-replaced elements

The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.

text-align

16.2 Alignment: the 'text-align' property

  • Value: left | right | center | justify | inherit
  • Initial: a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'
  • Applies to: block containers
  • Inherited: yes
  • Percentages: N/A
  • Media: visual
  • Computed value: the initial value or as specified

Quotes are from the CSS 2.1 specification.

Alohci
  • 78,296
  • 16
  • 112
  • 156