初学者：关于html中的text-align文本居中属性详解

text-align属性

text-align属性：文本对齐方式，设给块级元素。因为行级元素有个特点，内容有多宽，它就有多宽。
也就是内容自适应。比如说坐在椅子上把椅子撑满了，就无法再说它居中居左居右了。而且text-align属性是设置给父元素，让父元素里面的文字居中。而不是直接设置给文字，而且这个属性还可以设置给图片，设置到图片外面的盒子上，让里面的图片居中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.txt1{font-size: 30px;text-align: center;}span{text-align: center;}.txt2{text-align: right;}</style></head><body><p class="txt1">这是内容1</p><p class="txt2"><span>这是内容2</span></p><p class="txt3"><span>这是内容3</span></p>
<!--上面用span居中时，无法居中，因此span是行级元素，
行级元素无法设置text-align,若把text-align设置给外面的p即可，
所以自己理解的，若想把行级元素居中，在外面给它套个块级元素。
--></body>
</html>

运行图解如下：

由上图可以看出：
给p这个块级标签设置text-align生效了，给span这个行级标签设置text-align无效。
若想让span设置text-align生效，需要再其外面加一个块级标签。
下面扩充行级标签和块级标签有哪些
行内元素：
最常用的是span，其他还有img、a abbr b big br em i input label

块级元素
比较有代表性的是div 其余有p h1 h2 h3 h4 h5 h6 table ul li ol header section aside footer dl dd dt form hr pre tbody td tfoot th thead tr

下面再进行一些扩充：

text-decoration:none 去掉文本装饰线
text-decoration:underline 下划线
text-decoration:overline 上划线
text-decoration:line-through 删除线
text-indent属性文本块首行缩进单位px、em（字符宽度的倍数）、百分比（相对于父元素宽度的百分之多少）

CSS长度单位
px 相对于显示器分辨率
em 相对长度单位相对于父级的font-size而言，父级就是父元素以上的。
若父级的父级设置font-size值为30px，父级设置为50px，则em的值和直接的父级50px有关。若父级没有设置，则和父级的父级有关。
%
rem 相对于根元素的字体大小的单位，即为html的字号大小

浏览器的默认大小是16px，未经调整的浏览器都符合1em=16px

有其他不会的可以私信噢，
感觉文章对您有帮助的，动动您的发财小手指点个赞哦，谢谢！

初学者：关于html中的text-align文本居中属性详解相关推荐

php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解一.设定文字字体.颜色.大 ...
java rollback_Spring中的@Transactional(rollbackFor = Exception.class)属性详解
序言今天我在写代码的时候,看到了.一个注解@Transactional(rollbackFor = Exception.class),今天就和大家分享一下,这个注解的用法: 异常如下图所示,我们都 ...
html css 文本字体属性详解
文本.字体属性文本属性 color 为字体颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-family ...
关于Element中的clientWidth,scrollWidth,offsetWidth等属性详解
2019独角兽企业重金招聘Python工程师标准>>> client-属性 clientWidth,clientHeight 只读属性,表示一个元素的**可见区域**宽高,以像素计单 ...
java实现for文件删除_Java 添加、删除、替换、格式化Word中的文本的步骤详解（基于Spire.Cloud.SDK for Java）...
Spire.Cloud.SDK for Java提供了TextRangesApi接口可通过addTextRange()添加文本.deleteTextRange()删除文本.updateTextRang ...
Plotly中4种文本类型设置详解
作者:Lemon 来源:Python数据之道 Plotly中4种文本类型设置详解大家好,我是 Lemon . 在过去的一段时间里,我写了几篇用 Python 的交互式可视化工具 Plotly 来演示 ...
Android中设置显示文本,Android文本显示控件-TextView属性详解
android:autoLink //设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phone/map/all) andr ...
xpath 取标签下所有文字内容_对Xpath 获取子标签下所有文本的方法详解
对Xpath 获取子标签下所有文本的方法详解在爬虫中遇见这种怎么办想提取名称, 但是名称不在一个标签里使用xpath string()方法例如 data.xpath("string ...
python中append函数解析_对python中的pop函数和append函数详解
对python中的pop函数和append函数详解 pop()函数 1.描述 pop() 函数用于移除列表中的一个元素(默认最后一个元素),并且返回该元素的值. 语法 pop()方法语法: list. ...
[Python从零到壹] 十五.文本挖掘之数据预处理、Jieba工具和文本聚类万字详解
欢迎大家来到"Python从零到壹",在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界.所有文章都将结合案例.代码和作者的经验讲 ...

初学者：关于html中的text-align文本居中属性详解

text-align属性

初学者：关于html中的text-align文本居中属性详解相关推荐

最新文章

热门文章