CSS中的span样式对齐

逃离我推掉我的手 2022-03-18 04:05 439阅读 0赞

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>

[![f3d3572c11dfa9ec4c2735946fd0f703918fc12c.jpg][]][f3d3572c11dfa9ec4c2735946fd0f703918fc12c.jpg 1]

**扩展资料**

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

块元素特点：

1、总是在新行上开始。

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

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

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

内联元素特点：

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

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

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

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

[text-align]: https://www.baidu.com/s?wd=text-align&tn=SE_PcZhidaonwhc_ngpagmjz&rsv_dl=gh_pc_zhidao
[f3d3572c11dfa9ec4c2735946fd0f703918fc12c.jpg]: /images/20220318/42a808dcc32d45d38412e518961b0647.png
[f3d3572c11dfa9ec4c2735946fd0f703918fc12c.jpg 1]: https://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/f3d3572c11dfa9ec4c2735946fd0f703918fc12c.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，439人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS对齐弹性布局中左右对齐

CSS对齐弹性布局中左右对齐 <view class='li'> <view>产品名称</view> <view>猪肉</view>

一时失言乱红尘/ 2023年06月25日 02:27/ 0 赞/ 22 阅读

相关 js替换span内容，并添加css样式

html代码： <div class="divClass" id="divId"><span class="spanClass">签到</span></div> j

川长思鸟来/ 2022年12月15日 11:29/ 0 赞/ 255 阅读

相关 css 对齐方式

图片垂直对齐（vertical-align）默认: baseline – 一行内文本的下方。 middle – 一行内小写字母的高度的1/2 设置各对象的vert

迈不过友情╰/ 2022年12月12日 04:57/ 0 赞/ 227 阅读

相关 css文本对齐

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

电玩女神/ 2022年11月13日 05:21/ 0 赞/ 277 阅读

相关 css span文字下划线

.product1Span{ text-decoration: underline } 参考博客： [（span等）标签

矫情吗；*/ 2022年09月08日 05:57/ 0 赞/ 228 阅读

相关 CSS居中对齐

前端开发whqet,csdn,王海庆,whqet,前端开发专家一、文本居中利用下面的html代码演示文本居中，也可以到这里[在线研究][Link 1]。

红太狼/ 2022年08月26日 08:10/ 0 赞/ 296 阅读

相关 css中 span 和div 的位置关系

1.行级元素margin左右相加 ![20151228101127697][] 2.块级元素margin上下取大 ![20151228101132759][]

野性酷女/ 2022年08月18日 15:27/ 0 赞/ 210 阅读

相关 Span使用之系统提供的Span基本样式

Span的应用在`Android`中，使用`TextView`显示文本，但往往有一些特殊的文本样式，比如一段文本，中间某几个字颜色不同或者中间某几个字能点击等等，这些样

绝地灬酷狼/ 2022年06月17日 06:09/ 0 赞/ 503 阅读

相关 CSS中的span样式对齐

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

逃离我推掉我的手/ 2022年03月18日 04:05/ 0 赞/ 440 阅读

相关 css样式表中的样式覆盖顺序

有时候在写`CSS`的过程中，某些限制总是不起作用，这就涉及了`CSS`样式覆盖的问题，如下 <!DOCTYPE html> <html lang="en">

偏执的太偏执、/ 2021年06月26日 16:06/ 0 赞/ 485 阅读