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. Python在ubuntu下常用开发包名称

    build-essential python3-setuptools python-setuptools-doc python3-all-dev python3-wheelwheel时pip支持的一种 ...

  2. 输入LPCWSTR类型字符串

    LPCWSTR tmp = L"xxx"; char*转到LPCWSTR LPCSTR(charTmp)

  3. 改善用户体验，用图片的自身变化以及进度通知摆脱传统的进度条，okhttp,Canvas,Paint实现

    转载请注明出处:王亟亟的大牛之路 从最開始的白页面等待,到后来的进度条告知用户.到如今的WebBO/微信这样的先下缩略图点击才又一次下大图的方式,我们开发人员对用户感知的注意度越来越高.昨天刷微博的时 ...

  4. 电影大全 API接口

    http://www.apix.cn/services/show/29 http://www.apix.cn/services/show/112

  5. CodeForces 459D Pashmak and Parmida's problem

    Pashmak and Parmida's problem Time Limit:3000MS     Memory Limit:262144KB     64bit IO Format:%I64d ...

  6. Unix系统编程（）改变信号处置：signal

    Unix系统提供了两种方法来改变信号处置:signal和sigaction.这篇描述的是signal系统调用,是设置信号处理的原始API,所提供的接口比sigaction简单.另一方面,sigacti ...

  7. 使用padding和float处理带有间隙的多块布局

    . 每个间隙都是20px <div class="action-content pd10" style=""> <div class=&quo ...

  8. time函数

    time函数 time #include<time.h> time_t time(time_t *t); typdef long int time_t; time() returns th ...

  9. chrome显示小于12号字体的方法

    我现在做一个支持英文的网站,但是字体要设置小于12号字体,我百度方法是-webkit-text-size-adjust:none;  但是谷歌为什么不支持啊,  有没有解决办法 让谷歌浏览器 支持小于 ...

  10. 后台登陆功能的实现 SESSION

    控制器 <?php // 本类由系统自动生成,仅供测试用途 class IndexAction extends Action { public function index(){ $this-& ...