宽度和文本对齐属性

Question

为什么text-align和width不适用于内联元素。 jsFiddle示例。 你能得到一个CSS规范的证明链接吗？

Answer 1

HTML

<span>Some text</span>

<强> CSS

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

}

Working Fiddle

<强>输出：

详细了解展示广告素材 Click here

<强>更新

这可以通过此方式实现，但不建议出于以下原因

Style sheets提供了指定任意元素渲染的方法，包括元素是呈现为块还是内联。在某些情况下，例如列表元素的内联样式，这可能是合适的，但一般来说，不鼓励作者以这种方式覆盖HTML元素的传统解释。

的 Source

Answer 2

如果有的话，尺寸和对齐不能与span结合使用。包裹它或使用div。

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

<div>
<span>Some text</span>
</div>

Answer 3

width

  

10.3.1 Inline, non-replaced elements

     

'width'属性不适用。 'margin-left'或'margin-right'的计算值'auto'成为'0'的使用值。

text-align

  

16.2 Alignment: the 'text-align' property

     

  
• 价值：左|对|中心|辩解|继承
  
• 初始：如果'direction'是'ltr'，则表示'left'的无名值，如果'direction'是'rtl'，则表示'right'
  
• 适用于：阻止容器
  
• 继承：是
  
• 百分比：N / A
  
• 媒体：视觉
  
• 计算值：初始值或指定的
  

引言来自CSS 2.1规范。