css 控制 span位置居中

span{display:block;widht:宽度值自己定； text-align:center;}
这里是控制水平居中。
还可以 span{display:block;padding:值 } 这里值 设置为相同的 就可以
如：padding: 0 10px; 水平居中 左右间距为10px
或者 padding:10px 0 ; 上下垂直居中， 上下间距：10px；
亦或者： padding ：10px 上下左右各 10px

如果为的是居中显示，就采用楼上写的，将高度 和 行高 设置一样，即如：
height:30px;
line-height:30px;
若只想距离顶部留点空位，在给 div 设置padding-top; 具体设置了多少，相应 div 的高度就要减多少。不知你试了楼上这个的方法时，是否有注意到这个

span元素为内联元素，不具备宽度特性，设置text-align属性会没有效果，因此需要将span元素的展示类型转化为具有块级特性。

方法1：设置span的display属性为block。

<span style="font-size:14px;text-align:center;display:block;"></span>

方法2：设置span的display属性为inline-block，这种方式需要手动设置span的宽度。

<span style="font-size:14px;text-align:center;display:inline-block;width:500px;"></span>

扩展资料

html标签中根据元素的展示形式，主要分为块元素和内联元素。

块元素特点：

1、总是在新行上开始。

2、高度、行高以及外边距和内边距都可控制。

3、宽度缺省是它的容器的100%，除非设定一个宽度。

4、它可以容纳内联元素和其他块元素。

内联元素特点：

1、和其他元素都在一行上。

2、高度、外边距和内边距不可改变。

3、宽度就是它的文字或的宽度，不可改变。

4、内联元素只能容纳文本或者其他内联元素。

参考资料：

百度百科-块元素

百度百科-内联元素

span元素内是不应该嵌套span元素的，这是错误的写法，请使用div等块级元素嵌套实际上你要是把这三个span换成div的话，至少文字方面的排版问题就解决了，位置问题可以用margin和float来调整。

1、请注意：#test {vertical-align:middle;}s#test 表示了div里面所有元素,当然包含了span,input,img这些内联元素了vertical-align初始值baseline缺省值。

2、可否继承否适用于内联元素说明vertical-align:baseline使元素的基线同父元素的基线对齐vertical-align不能影响表格单元中的内容的对齐，对于块元素中的内容也一样。

3、请注意,vertical-align只影响内联元素,比如span,img,em,input,a等这些元素,而对div,h3,p等这些块元素是无效的。

上下左右 居中
代码如下 复制代码
div{
position:fixed;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
width:200px;
height:150px;
}
如果只需要上下居中，那么把 left:0; 或者 right:0; 即可

time-item span, time-item strong {display: inline-block; display: inline; zoom:1; padding: 10px 15px;}

---