CSS text-align 属性指定块级元素中的内联元素(如文字和图片)的对齐方式。

CSS text-align属性并不控制块级元素的对齐方式,它控制块级元素里面的内联元素的对齐方式。虽然这个属性的名称为text-align,但是块级元素中的所有内联元素都会被这个属性影响。

该属性的对齐方式是相对于元素本身而言的,不是相对于整个浏览器视口而言。

text-align属性会级联,在父元素上使用text-align属性,其下的所有块级子元素也会拥有相同的内联元素对齐方式。

官方语法

text-align: start | end | left | right | center | justify | match-parent | start end |

参数:

start:根据文字的方向(direction)来决定对齐方式,如果文字方向是从左向右,效果和left相同,内联元素左对齐。如果文字方向是从右向左,效果和right相同,内联元素右对齐。

end:与start正好相反。如果文字方向是从左向右,效果和right相同,内联元素右对齐。如果文字方向是从右向左,效果和left相同,内联元素左对齐。

left:内联元素在行内容器中左对齐。

right:内联元素在行内容器中右对齐。

center:内联元素在行内容器中居中对齐。

justify:文字根据text-justify属性指定的方法来进行调整。浏览器会调整单词之间的间隙,使内联元素可以填充整个行内容器。通俗来说就是调整单词的间隙,使文字向两侧对齐,左右两侧距离容器的空白保持基本相同。

match-parent:和inherit类似,区别在于start和end的值根据父元素的direction确定,并被替换为恰当的left或right。

start end:实验性的属性值,目前没有浏览器支持。

:实验性的属性值,目前没有浏览器支持。第一个出现的该(单字符)字符串被用来对齐。跟随的关键字定义对齐的方向。例如,可用于让数字值根据小数点对齐。

text-align属性的初始值根据文字方向direction来决定,如果是ltr则为left,如果是rtl则为right。

应用范围

text-align属性可以应用在所有块级元素上。

示例代码

text-align: left;

text-align: right;

text-align: center;

text-align: justify;

text-align: start;

text-align: end;

text-align: match-parent;

text-align: start end;

text-align: ".";

text-align: start ".";

text-align: "." end;

text-align: inherit;

在线演示

下面的代码演示了文本居中对齐的效果。

这段文字居中对齐。

浏览器支持

所有的现代浏览器都支持text-align属性,包括Chrome, Firefox, Safari, Opera, IE3+, Android 和 iOS。IE 和 Opera不支持start和end取值。

相关阅读

html5 text align,CSS属性参考 | text-align相关推荐

  1. html5 column-width column-gap,CSS属性参考 | column-width

    CSS column-width属性用于指定列的宽度.该属性用于将一个容器制作为弹性多列布局,并为每个列指定一个宽度值. 我们在看杂志的时候经常可以看到多列布局的排版,例如下面的截图: column- ...

  2. html如何设置自动对齐,HTML5 教程之CSS 水平对齐(Horizontal Align)

    CSS 水平对齐(Horizontal Align) 在CSS中,有几个属性用于元素水平对齐. 块元素对齐 块元素是一个元素,占用了全宽,前后都是换行符. 块元素的例子: 文本对齐,请参阅 CSS文本 ...

  3. php中align标签属性值,html align属性是什么含义?html中的align属性设置方法介绍

    html align属性是什么含义?html中的align属性设置方法介绍都在这里,本篇文章介绍了html align属性的定义和含义,还有关于html align属性值的设置介绍 html alig ...

  4. html left属性,CSS属性参考 | left

    CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...

  5. html5语法参考图片,CSS属性参考 | background-image

    background-image属性用于为元素设置一个或多个背景图像,多个背景图像使用逗号来分隔. background-image属性用于为某个元素设置一个或多个背景图像,各个背景图像以堆叠的方式逐 ...

  6. html5文本缩进元素,CSS属性参考 | text-indent

    CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格.也就是通常所说的首行文本缩进. 在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观, ...

  7. html5 first child,:first-child | CSS属性参考

    CSS :first-child伪类选择器用于匹配父元素中的第一个子元素. :first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素,例如: 第一个段落... 第二个段落... 如果使用 ...

  8. html的text-decoration,CSS属性参考 | text-decoration

    CSS text-decoration 属性用于设置文本的装饰线(下划线.上划线和删除线),或移除已有的文本装饰线. 在CSS3中,text-decoration属性是text-decoration- ...

  9. css中的inset,inset() | CSS属性参考

    CSS inset()函数是一个图形函数,用于指定某种基本图形类型.inset()函数用于定义矩形. CSS 代表一种基本图形,它通过图形函数来定义一个图形.一个基本图形可以作为shape-outsi ...

最新文章

  1. kickstart+tftp部署redhat系统
  2. angular cli 切换 css_漫谈 Angular 定制主题的四种方式
  3. 网络安全-安全散列函数,信息摘要SHA-1,MD5原理
  4. [Ruby]$: 是什么意思?
  5. LeetCode之Sum of Two Integers
  6. Spark-submit执行流程,了解一下
  7. 当cell中有UItextfiled或者UITextVIew时,弹出键盘把tableview往上,但是有的cell没有移动...
  8. [DELPHI]数据类型
  9. Android Studio 创建aar包与引用
  10. typecast java_Delphi设置无效的Typecast
  11. 平面内 两直线/两向量的夹角方向 逆时针 还是顺时针
  12. Python QGIS 3自动化教程
  13. 什么是PMI指数?PMI指数是什么意思? 如何计算PMI指数?
  14. matlab 巴特沃斯滤波器频率响应,巴特沃斯滤波器matlab实现
  15. 计算机各类会议及投稿文章总结(快速入门)
  16. xbox360使用_Xbox 360作为媒体中心
  17. 增强现实(AR)的前世今生...
  18. Android Studio 使用友盟进行多渠道打包
  19. IE 调试工具 IETester+DebugBar
  20. 《数据结构》实验报告四:串的模式匹配(BF算法、KMP算法)

热门文章

  1. 创业公司项目管理中必踩的那些坑 | TAPD经验谈
  2. mysql mvvc 简单理解
  3. 移动适配、rem以及Less
  4. python安装prosail库及Fortran编译器下载与配置
  5. 新手先学python还是c语言,初学者应该选择学习Python还是C语言
  6. android 已经依赖了某个库,但是还是会提示Cannot resolve symbol ‘xxx‘,运行却不会报错
  7. Wondershare DVD Creator for Mac(强大的DVD工具箱)
  8. char wchar_t TCHAR
  9. LinuxPTP没那么简单
  10. 几年的放纵,换来的可能就是一生的卑微和坎坷。