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. Apache多虚拟主机多版本PHP（5.2+5.3+5.4）共存运行配置全过程

    因为某种需求,可能是因为早期的项目需要低版本的php,和目前开发所用的版本不太一致,我们需要给不同的虚拟主机配置不同版本的PHP.避免去额外配置多个Apache,等iis和apache共存的麻烦. 下 ...

  2. 二级指针 （C语言）

    二级指针又叫双指针.C语言中不存在引用,所以当你试图改变一个指针的值的时候必须使用二级指针.C++中可以使用引用类型来实现. 下面讲解C中的二级指针的使用方法. 例如我们使用指针来交换两个整型变量的值 ...

  3. Quartus调用Modelsim SE避免重复编译Altera器件库的方法

    最近用Quartus 15.0配合Modelsim SE 10.4的64位版本,简直就是闪电一般的仿真速度.但是众所周知,SE版本最大的问题就是每次由Quartus自动调用时,都要重新编译所使用的器件 ...

  4. 移动touch事件之一

    触摸事件分类: touchstart:当手指触摸屏幕时触发:即使已经有一个手指放在了屏幕上也会触发. touchmove:当手指在屏幕上滑动时连续的触发.在这个事件发生期间,调用preventDefa ...

  5. removeFromParentAndCleanup和callfuncN_selector

    void  removeFromParentAndCleanup (bool cleanup)//删除父节点中的当前节点并清除动作及回调函数 void ActionCallFuncND::onEnte ...

  6. django 使用post方法出现403错误的解决办法

    当采用客户端象django的服务器提交post请求时.会得到403,权限异常.因为django针对提交的请教,有校验.所以会如此. 解决办法: 导入模块:from django.views.decor ...

  7. python模块之codecs: 自然语言编码转换

    python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理.    有一点需要清楚的是,当python要做编码转换的时候,会借助于内部 ...

  8. 【Code::Blocks】windows 环境下编译 Code::Blocks（已修正）

    Code::Blocks 在2012-11-25发布了最新的12.11版本,相比上一个版本(10.05),Code::Blocks 进行了许多改进和更新(Change log). 引用 Wikiped ...

  9. 清除Css中select的下拉箭头样式

    select {/*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/appeara ...

  10. [android] AndroidManifest.xml【 manifest -> uses-permission】

    在  API Level 1 时被引入 简介: 在某些情况下,你为app设置的权限将会影响到google应用商店会用何种规则来过滤你的APP. 如果你需要一个硬件相关的权限——CAMERA,googl ...