text-align

  • 版本:CSS1/3
  • 媒体:视觉

text-align语法:

text-alignstart end | match-parent | <string>? [ start | end | left | right | center | justify ]

默认值start

适用于:块元素

继承性:有

动画性:否

计算值:指定值,除 match-parent 值外

text-align取值:

left:
内容左对齐。
center:
内容居中对齐。
right:
内容右对齐。
justify:
内容两端对齐。
start:
内容对齐开始边界。(CSS3)
end:
内容对齐结束边界。(CSS3)
<string>
字符串必须是单一字符,否则申明将无效。(CSS3)
match-parent:
这个值和 inherit 表现一致,只是该值继承的 start 或 end 关键字是针对父母的 direction 值并计算的,计算值可以是 left 和 right 。(CSS3)
start end:
指定 start 对齐第一行和任何强制打断的行;end 对齐所有剩余的行不受 text-align-last 影响。(CSS3)

text-align说明:

设置或检索对象中内容的水平对齐方式。
  • 块级元素的文本是一些堆叠的线框
  • 要使得 text-align 的 justify 两端对齐生效,需要在汉字间插入有空白,如空格;
  • 块内的最后一行文本(包括块内仅有一行文本的情况,这时既是第一行也是最后一行)及被强制打断的行,其两端对齐需使用 text-align-last
  • IE浏览器下,如果 text-align-last 要生效,必须先定义 text-align 为justify;
  • 单行两端对齐效果变得比较简单:

    css code:

    li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align-last:justify;}
    li:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

    html code:

    <ul>
    	<li>我 是 谁</li>
    	<li>你 又 是 谁</li>
    	<li>世 界 末 日 2012</li>
    </ul>

    以上代码3个li中的内容都将两端对齐

    需注意几点:
    • 所有主流浏览器都支持 text-align 的 justify 属性值;
    • text-align不处理强制打断的行,也不处理块内的最后一行,换句话说,如果块内仅有一行文本(该行既是第一行也是最后一行),这时仅设置text-align:justify无法让该行两端对齐;
    • text-align-last 是用来处理块内的最后一行和强制打断的行的,所以当要设置单行文本两端对齐时,需使用 text-align-last
    • 非Firefox浏览器要使得两端对齐生效,需在文本间插入空白,如空格(如果一行仅有2个汉字,Firefox也需在之间插入空白);
    • Chrome23, Safari5.1.7, Opera12.5 尚不支持 text-align-last
    依据上述的点,要实现单行两端对齐,可以走2个方向:
    1. 由于所有浏览器都支持 text-align 的 justify 属性值,但不全支持 text-align-last,我们可以对非IE及IE7以上浏览器使用伪对象生成额外的内容(IE7及以下浏览器不支持伪对象,使用text-align-last处理),置于第二行并将其隐藏,这时第一行文本(即要对齐的那个单行文本)可使用text-align:justify来对齐
    2. 支持 text-align-last 的浏览器,如IE, Firefox使用 text-align-last 处理,不支持的浏览器使用如上述方法处理;

    所以就目前情况来看,使用第一种方案是比较简约的,可以轻易的兼容IE5.5-10, Firefox, Chrome, Safari, Opera

    查看 css两端对齐详解 css两端对齐效果demo

  • 对应的脚本特性为textAlign

text-align兼容性:

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 5.5-9 #1 #2 #3 4-18 #2 #3 5.1.7 #3 13-23 #3 11.5-12.5 #1 #2 #3
  1. 不支持:start | end
  2. 不支持:<string>
  3. 不支持:match-parent | start end

text-align示例:

CSS3相关文章推荐

  • 前端开发博客
    前端开发博客:#CSS3#【CSS3卡牌旋转滑动效果】这个 CSS3 类似于幻灯片旋转的效果,是一个比较有意思并且比较受欢迎的特效。之前没有去研究过,无意在博客上看到 Wenzi 写了这个东西,来看看他的代码是怎么实现的。网页链接 #前端开发博客# ​
    3月21日 14:00来自caibaojian.com
    转发 (19) |评论 (2)
  • 硬不起来啦
    硬不起来啦:#css3#@font-face能引用多个字体吗?????
    3月7日 15:57来自vivo智能手机客户端
    转发 |评论
  • GitHub开发者
    GitHub开发者:弹性盒模型指南 作者:W.Y. @问崖不文雅 #CSS3# #Flexbox# Flexbox 布局是 CSS3 中一种新的布局模型,被称为弹性盒模型。该模型是为了改进容器中内容的对齐、方向和排序方式,即使是动态,甚至是未知大小的容器。弹性盒模型的主要特点是,可以在不同屏幕尺寸下以最佳的方式,修改其子项的高度或宽度来 ​
    3月4日 22:30来自微博 weibo.com
    转发 |评论
  • 前端开发博客
    前端开发博客:#CSS3#【CSS3硬件加速技巧】摘要:使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。以下为原文:C...请戳→网页链接 #前端开发博客# ​
    2月17日 12:00来自caibaojian.com
    转发 (3) |评论
  • i程序媛媛
    i程序媛媛:【纯css3实现饼图动画】 注: 本案例来自 CSS Screct先看效果: 你可能需要掌握下列知识CSS3 Animation Pseudo Element 使用 linear-gradient 制作不渐变 currentColor (非必须) 使用 border-radius ‘除’语法(非必...#程序员的资料库##CSS##CSS3# 查看全文:网页链接
    2016-6-27 22:29来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【最直观的方式学习flexbox属性】弹性盒模型(Flexbox Layout)是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的子元素在父元素中的对齐,方向和顺序等等。flex容器的主要特性是...#程序员的资料库##Android##CSS##CSS3##Git##iOS# 查看全文:网页链接
    2016-6-27 20:00来自程序员的资料库
    转发 |评论
  • 课工场
    课工场:#css3# #html5# 发布了头条文章:《css体验优化之图片容器设置宽高比》 网页链接
    2016-6-27 16:57来自微博 weibo.com
    转发 |评论
  • 吴东元丶
    吴东元丶:【文章发布】css3中的word-wrap、word-break、white-space:最近在我的网站编辑文章的时候遇到了文字过长导致溢出的情况,这才发现我的css没加文字截断,然后加上word-break:break-all就搞定了。下面给大家介绍css3中控制文字换行的三个...#Css3# 查看全文:网页链接
    2016-6-27 15:32来自那樊笼
    转发 |评论
  • i程序媛媛
    i程序媛媛:【如何理解CSS的display属性】在布局中,display属性是最重要的CSS属性之一。其最常见的属性值有block,inline,none,table以及inline-block。最近的新宠为flex,因为它是专门为布局创建的display属性。...#程序员的资料库##CSS##CSS3##HTML5##Ruby# 查看全文:网页链接
    2016-6-24 09:18来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【何时需要文档兼容模式】Windows Internet Explorer的每个主要版本都会增加新功能,目的是让浏览器更好用、更安全、更符合行业标准。随着功能的增多,很多旧网站面临无法正确显示的风险。本文介绍Windows I...#程序员的资料库##CSS##CSS3##HTML5# 查看全文:网页链接
    2016-6-20 12:27来自程序员的资料库
    转发 |评论
  • i程序媛媛
    i程序媛媛:【22个必须知道的css技巧】本文是 Gredswsh的技术生活 整理的 22个必须知道的css技巧, 作为偶尔也会涉猎前端开发的我来说,特别喜欢一些前端开发的总结性的文章,文末我也附上了其它几篇关于CSS技巧的文章。1、改变...#程序员的资料库##CSS##CSS3# 查看全文:网页链接
    2016-6-18 17:04来自程序员的资料库
    转发 |评论
  • 湖南高级网络营销师
    湖南高级网络营销师:一:谈谈html控制样式的弊端1.相同的样式效果,通过不同的属性来完成的例如颜色:<body text=""> <font color="">2.程序的可维护性不高。少的工作完成更多的事情就可称之为可维护性高通过css就能解决上述问...#css3# 网页链接
    2016-6-14 11:18来自360安全浏览器
    转发 |评论
  • 前端开发博客
    前端开发博客:【HTML5和CSS3代码生成器】这篇文章分享了一些比较常用的CSS3特效生成器,有按钮、边框、圆角、渐变、系统字体和阴影等,使用这些工具能够快捷的做出你想要的小特效,值得收藏使用...请戳→ 更多《#CSS3#教程》网页链接
    2016-6-6 19:27来自caibaojian.com
    转发 (29) |评论 (6)
  • 前端开发博客
    前端开发博客:【50个有用的CSS代码片段】For this article I want to present 50 handy CSS2/CSS3 code snippets for any...请戳→ 更多《#CSS3#教程》网页链接
    2016-5-30 22:27来自caibaojian.com
    转发 (22) |评论 (1)
  • 前端开发博客
    前端开发博客:【HTML5和CSS3代码生成器】这篇文章分享了一些比较常用的CSS3特效生成器,有按钮、边框、圆角、渐变、系统字体和阴影等,使用这些工具能够快捷的做出你想要的小特效,值得收藏使用...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-5-3 13:12来自caibaojian.com
    转发 (38) |评论 (3)
  • 空倪儿
    空倪儿:Experimenting with a new crown for Kawaii-CSS framework #css3##css##网页设计##网页UI# ​
    2016-4-25 16:01来自iPhone 6s
    转发 |评论
  • 前端开发博客
    前端开发博客:【【译】走向Retina Web】在深入细节之前,有必要先明确一些关键性概念。Device Pixels(设备像素)一个设备像素(或者称为物理像素)是显示器上最小的物理显示单元。在...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-21 22:36来自caibaojian.com
    转发 (6) |评论 (2)
  • 前端开发博客
    前端开发博客:【50个有用的CSS代码片段】For this article I want to present 50 handy CSS2/CSS3 code snippets for any...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-12 12:01来自caibaojian.com
    转发 (21) |评论 (5)
  • 前端开发博客
    前端开发博客:【学习css3动画属性Transition】发现在线的css3手册中都没有提到这个属性。应该是写得不全吧,不过搜索百度的时候发现第一个位置的那个的确是有的。赞一个。下面进入学习的阶...请戳→网页链接 更多《#CSS3#教程》网页链接
    2016-4-3 09:00来自caibaojian.com
    转发 (15) |评论 (3)
  • 前端开发博客
    前端开发博客:【css3变形属性transform】这个很简单,就跟border-radius一样,就是一个参数,同样是针对不同的浏览器有不同的私有属性。w3c上的例子是这样子写的:div{transform:...全文网页链接阅读更多相关《#CSS3#教程》网页链接
    2016-3-26 18:00来自caibaojian.com
    转发 (16) |评论 (2)