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

silence^

已于 2022-05-18 09:16:07 修改

阅读量1.5w

点赞数 6

文章标签： css html

于 2020-05-31 14:10:46 首次发布

本文链接：https://blog.youkuaiyun.com/lyclyc_/article/details/106454824

版权

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

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