1.语法

text-align具体参数如下：

语法：text-align : left | right | center | justify 
说明：设定元素内文本的水平对齐方式。 
参数：left : 左对齐；right : 右对齐；center :  居中；justify :  两端对齐 
初始值：跟浏览器的设置有关 
继承性：可继承 
适用于：block元素 

　　其各参数在浏览器内的显示如图1所示。

图1 水平对齐方式

　　前三种对齐方式都很好理解，而最后一种两端对齐（text-align:justify）可以让大段的文本看起来比较整齐，不过两端对齐的表现可能会因为浏览器的不同而有所不同，如图2所示。

图2 不同浏览器对于两端对齐的不同表现

　　2.适用于：block元素

　　text-align属性只有对block元素设定才会生效。例如有如下设定：

<p style="text-align:right;"><img src="img/ddcat_anim.gif" alt="图片" style="text-align:center;" /></p> 

虽然对图片设定了居中对齐，但是在浏览器内的效果如图3所示。

图3 图片与对齐方式

　　由图3读者可以看到，因为图片<img>默认为inline元素，所以即使定义了“text-align:center;”，也仍然同文字一起右对齐。因此不能直接通过对图片的设定来达到单独图片的对齐。 
　　如果想让单个图片达到居中的效果，应该在其外嵌套一个block元素，然后设置这个元素的对齐方式为居中对齐，如下所示：

<p style="text-align:center;"><img src="img/ddcat_anim.gif" alt="图片" /></p> 

　　其效果如图4所示。

图4 图片居中

　　3.继承性

　　text-align属性是可继承的。当设定了某个元素的水平对齐方式以后，其子孙元素的水平对齐方式都将继承该设定，如图5所示。

图5 text-align的继承性

　　注意：不同浏览器之间的继承略有差别。例如在Opera中，表头<th>将不继承右对齐，而依然居中对齐，除非对其专门定义。 

　　由于text-align属性的继承性，因此在定义时候需要特别注意，如果子孙元素不希望继承水平对齐方式，则需要再分别定义。

　　4.应用：整体居中 
　　虽然text-align用以设定文本的水平对齐方式。但是在IE中，对齐会应用在此元素内所有的子孙元素上，例如有如下代码：

<div id="textAlign3" style="text-align:center;"> 
  <p style="width:70%;">本段落会在IE内居中显示，而在Firefox和Opera内居左显示。</p> 
</div> 

　　其在Windows IE 6.0、Firefox 2.0和Opera 8.5中显示的效果如图6所示。

图6 不同浏览器的差别

　　读者可以看到，<p>元素本身也居中显示了，因此可以利用此特性来设置页面内容在IE内的整体居中效果，例如有html结构如下：

<body> 
  <div id=”wrap”> 
    <h1>页面居中</h1> 
    <p>设置CSS使页面整体居中。</p> 
</div> 
</body> 

　　要使<div id=” wrap”>在浏览器内居中，则需要设置CSS如下：

body { 
text-align: center;  /* 在IE内居中 */ 
} 
#wrap { 
width: 90%;  /* 设定宽度才能显示出居中的效果。*/ 
margin: 0 auto;  /* 在Firefox及Opera等浏览器内居中。*/ 
} 

　　此时在浏览器内浏览，页面内的元素都将居中显示，如图7所示。

图7 浏览器内页面整体居中

　　注意：此时页面内所有的文本都继承<body>的的设定而居中显示，因此实际应用中，可以再设定wrap层的对齐方式为左对齐。

CSS文本对齐text-align详解的更多相关文章

  1. Linux文本编译工具VIM详解

    Linux文本编译工具VIM详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.VIM概述 1>.vim简介 >.vi: 全称Visual editor,即文本编辑 ...

  2. phaser学习总结之Text对象详解

    前言 在phaser学习总结之phaser入门教程中,我们已经入门了phaser,对phaser也有所了解但是我们并没有对phaser中的每个对象的属性和方法进行详解,本章将对phaser中的Text ...

  3. Linux 文本对比 diff 命令详解（整理）

    diff 命令详解 1.概述 windows系统下面就有不错的文本对比工具可以使用,例如常用的Beyond Compare,WinMerge都是图形界面的比较工具而且使用非常方便,如果你仅仅是在win ...

  4. CSS系列 (05)：浮动详解

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. -- W3C 文字环绕 float可以 ...

  5. CSS position overflow float 属性 详解

    position  overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...

  6. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  7. css文本样式text、字体样式font

    文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...

  8. Flutter Container 组件、Text 组件详解

    Text 组件 textAlign     文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection   文本方向(ltr 从左至右 ...

  9. CSS样式----CSS属性：字体属性和文本属性（图文详解）

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

随机推荐

  1. [转]C#如何判断操作系统位数是32位还是64位

    方法一: 对于C#来说,调用WMI是一种简单易行的方式.我们可以用Win32_Processor类里面的AddressWidth属性来表示系统的位宽.AddressWidth的值受CPU和操作系统的双 ...

  2. Django Rest Framework(分页、视图、路由、渲染器)

    一.分页 试问如果当数据量特别大的时候,你是怎么解决分页的? 方式a.记录当前访问页数的数据id 方式b.最多显示120页等 方式c.只显示上一页,下一页,不让选择页码,对页码进行加密 1.基于lim ...

  3. sass 的使用

    普通变量 ? 1 $fontSize:12px; 默认变量 ? 1 $fontSize:12px; !default; 变量覆盖:只需要在默认变量之前重新声明下变量即可 ? 1 2 $fontSize ...

  4. 在linux下监控文件是否被删除或创建的命令

    You can use auditd and add a rule for that file to be watched: auditctl -w /path/to/that/file -p wa ...

  5. [转]__cdecl与__stdcall

    来自Programming Windows 5th Edition The WinMain function is given a type of WINAPI (as is every Window ...

  6. [Eth]Mac/Phy/mdio/Rgmii

    转自:http://www.cnblogs.com/zxc2man/p/3769777.html 1. MDIO(Management Data Input/Output),对G比特以太网而言,串行通 ...

  7. 介绍编译的less的几种IDE工具

    介绍编译的less的两种IDE工具 现在css预编译越来越普及了,著名的有less.sass.stylus等等等等.功能上基本上都是大同小异.这些个玩意儿主要表达的意思就是:“像编程一样的编写你的cs ...

  8. Libgdx window add alpha action change the background actor alpha

    现象: Stage中包括一个Window,一个Actor,Window中加入alpha action后,Actor也随之消失:Actor加入alpha action后,不起作用. 解决: 重写draw ...

  9. Linux 复制、移动覆盖文件不提示

    # vi ~/.bashrc   如果你看到如下内容,以下命令都会用别名执行了,就是说自动加了 -i 参数 alias rm='rm -i'alias cp='cp -i'alias mv='mv - ...

  10. This表示当前对象

    This表示当前对象. Public void printNum(){ Int number=40: System.out.println(this.number); } 此时打印的是实例变量,而非局 ...