text-align的用法

text-align运用在块级元素中，使其中的文本对齐。事实上这句话的意思是运用在块级元素中text-align会使其包含行内元素对齐。

    <div class="test"><p>hhh</p><h1>nihaohaohhh</h1><img src="./1.jpg" alt=""></div>

会发现p和h1以及img都居中了？

结果是所有的元素都居中了，可是<h1>和<p>不是块级元素吗？
原因是这些块级元素继承了<div>中的text-align属性，然后对包含在其中的文本进行居中对齐。
使用<div>的好处是，假如要对某些元素进行居中，不用对每一个块级元素进行居中处理，只要对<div>应用样式就可以了。

以上说法是我从未网上查找总结的，自己觉得使用另一种方式解释会更合适

css的样式.test{width: 300px;height: 300px;text-align: center;background-color: pink;}img{width: 50px;height: 50px;}.test div{/* width: 50px;height: 50px; */border: 1px solid black;}.test p{/* display: inline-block; */width: 150px;height: 50px;background-color: red;}span{border: 1px solid black;}h1{border: 1px solid black;}结构<div class="test"><div>我是div</div><p>我是块级元素p</p><span>我是行级元素span</span><h1>我是h2，块级</h1><img src="./1.jpg" alt=""></div>

最终样式

如上图所示：

我们发现对父级使用text-align:center; 会对行级块以及行级元素span有居中的效果。
而对块级元素div以及h2看似也有居中效果？这是为什么呢？
观察可以发现我们并没有给div和h2设置宽高，当没有设置宽高的时候，其宽度继承了父级的，高度是由文本撑开，当然也继承了父级的text-align:center;
但是我们观察块级元素p标签，p元素我们给你设置了宽高，此时它本身不是水平居中，而其文本是居中的，也就是说，给父级设置text-align这个属性，只会对其子元素是行级以及行级块元素起作用，且子元素会继承text-align这个属性对其文本起作用。
当我们把p元素转换为行级块元素的时候，你会发现，不仅p元素中的文本居中了，其自身也居中了。

text-align的用法相关推荐

align 的用法（u-boot源代码分析）
今决定认真分析一下u-boot的代码,但一开始就被".balignl 16 0xdeadbeef"这条语句难住了,还好,google了一下,找到了<分析了一下 align 的 ...
处理器startup.s 常见汇编指令,伪指令解释 .globl _start .section .data .text .align
.section .data 汇编程序中以.开头的名称并不是指令的助记符,不会被翻译成机器指令,而是给汇编器一些特殊指示,称为汇编指示(Assembler Directive)或伪操作(Pseudo- ...
Excel获取指定数字格式文本——TEXT函数及其用法
目录 1.TEXT函数的语法及作用 (1)语法:TEXT(value,format_text) 即TEXT(值,数字格式) (2)作用:将数值转换为指定数字格式表示的文本. 2.TEXT用法及实例 ( ...
python Tkinter Text的简单用法
1.设置python Tkinter Text控件文本的方法 text.insert(index,string) index = x.y的形式,x表示行,y表示列向第一行插入数据,text.ins ...
Sublime Text 2 快捷键用法大全
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) Ctrl+G 跳转到相应的行 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+L 选择整行(按住-继续 ...
html text align属性,CSS中的text-align属性怎么用
CSS的text-align属性可用于设置文本的位置,接下来的这篇文章将给大家介绍关于CSS中的text-align属性的用法,下面我们来看具体的内容. 我们先来看一段简单的代码在此处显示文字效果 ...
Sublime Text 2 快捷键用法大全（转）
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) Ctrl+G 跳转到相应的行 Ctrl+J 合并行(已选择需要合并的多行时) Ctrl+L 选择整行(按住-继续 ...
matlab中text竖着写,科学网—matlab中text函数的用法 - 张瑞龙的博文
text(x,y,'string')在图形中指定的位置(x,y)上显示字符串string. text(x,y,z,'string'.'PropertyName',PropertyValue„)对引号中 ...
html text align属性,HTML canvas
实例在位置 150 创建一条红线.位置 150 是下面实例中定义的所有文本的锚点.请研究每种 textAlign 属性值的效果: YourbrowserdoesnotsupporttheHTML5c ...
【算法思考】Pytorch Align Corners 用法总结
目录前言需要align_corners参数的接口参数分析前言 Pytorch的许多接口都需要提供align_corners=True/False.为了更好的使用pytorch提供的接口,有必要 ...

text-align的用法

text-align的用法

text-align的用法相关推荐

最新文章

热门文章