初学者：关于html中的text-align⽂本居中属性详解
html怎么让所有内容居中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
有其他不会的可以私信噢，
感觉⽂章对您有帮助的，动动您的发财⼩⼿指点个赞哦，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。