CSS中的span样式对齐
大家看看上面的代码,里面的 text-align:center 这行不能用....
请问下怎么样才能让文字中间对齐呢? 展开
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元素为内联元素，没有自带块属性，无论设置wight，还是height，或者是设置text-align属性会均没有效果，因此需要将span元素的展示类型转化为具有块级特性。
1、span设置float 设置浮动后对span设置宽度 高度会起作用
<span style="font-size:18px;float:left;text-align:center;>...</span>
2、span设置display:block span形成块自然设置宽会起作用
<span style="font-size:18px;text-align:center;display:block;">...</span>
3、span设置display:inline-block
<span style="font-size:18px;text-align:center;display:inline-block;width:600px;">...</span>
扩展资料
html标签中根据元素的展示形式，主要分为块元素和内联元素。
块元素特点：
1、总是在新行上开始。
2、高度、行高以及外边距和内边距都可控制。
3、宽度缺省是它的容器的100%，除非设定一个宽度。
4、它可以容纳内联元素和其他块元素。
内联元素特点：
1、和其他元素都在一行上。
2、高度、外边距和内边距不可改变。
3、宽度就是它的文字或图片的宽度，不可改变。
4、内联元素只能容纳文本或者其他内联元素。
参考资料来源：
css样式中，span标签和select对齐的方法是一致的：
可以给span设置跟select一样的高度，在给span设置line-height跟高度一样的值。
span标签是被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
select 元素可创建单选或多选菜单。<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
还有一种单独对span进行定义的：
span { display:block; width: 150px; float:left; text-a;}
一定要写block，变成块级元素；最好写上宽度，便于对齐。
<span style="font-size:15px;border:1px solid #000; width:300px; text-align:center"><a href="#"> 空间</a> | <a href="#">更多>></a></span>
你要的是不是垂直方向对齐呢?
<span style="font-size:15px;border:1px solid #000; width:300px; height:50px;
line-height:50px"><a href="#"> 空间</a> | <a href="#">更多>></a></span>
这是垂直水平都对齐,再加上text-align:center:
<span style="font-size:15px;border:1px solid #000; width:300px; height:50px;
line-height:50px; text-align:center"><a href="#"> 空间</a> | <a href="#">更多>></a></span>
还是要span水平居中:
<center>
<span style="font-size:15px;border:1px solid #000; width:300px; height:50px;
line-height:50px"><a href="#"> 空间</a> | <a href="#">更多>></a></span>
</center>
不明白你啥意思!请你把问题说明白点儿好不好!
Vue实践-CSS样式position/display/float属性对比使用
